Out of the box, the Timeline Express – Popups Add-On disables the center icon from being clicked. This prevents navigation to the interior single announcement page but allows the ‘Read More’ link to open the popup window. Some users have asked how to make the popup display when the icon is clicked in the center of the timeline. This is possible using a bit of CSS and JavaScript, and hooking into the `timeline-express-scripts` action.

You’ll see in the code snippet below that we’re adding a `:hover` to the icon to simulate it looking like a link, and using a bit of JavaScript trickery to click the ‘Read More’ link whenever the icon container is clicked.

You can just drop the following code snippet into your child themes functions.php file, a custom plugin or MU plugin that you create. Once added to one of those locations, you should start seeing when the icon is clicked the popup window displays with the announcement content.

<?php
/**
 * When the Timeline Express icon is clicked open the associated popup.
 *
 * @return mixed Styles and scripts to make hte popup display.
 */
function timeline_express_popups_icon_click() {
    ?>
    <style type="text/css">
    .cd-timeline-block:hover {
        cursor: pointer;
    }
    </style>
    <script type="text/javascript">
    jQuery( document ).ready( function() {
        jQuery( 'body' ).on( 'click', '.cd-timeline-img', function() {
            jQuery( this ).closest( '.cd-timeline-block' ).find( '.popups-read-more-link' ).click();
        } );
    } );
    </script>
    <?php
}
add_action( 'timeline-express-scripts', 'timeline_express_popups_icon_click' );

If you encounter any issues or need assistance please don’t hesitate to reach out to our support team – we’re always here to jump in and help out in any way we can!