Want to make first Option auto selected in Gallery

This is the gallery page: http://www.divi.comunify.cc/excercises/

The requirement is, when the page loads, the first option ("Arms" in this page) will be auto selected.

This code is working in browser console, but not in mu plugins:

<?php
add_action( 'wp_footer', 'make_arms_selected' );
function make_arms_selected() {
    ?>
    <script type="text/javascript">
      jQuery(document).ready(function($) {
		$(".et_pb_portfolio_filters.clearfix ul li:nth-child(1) a").addClass("active").click();
      });
    </script>
    <?php
}

What could be the solution for this?

  • Ash
    • WordPress Hacker

    Hello Daniel

    Am I currently seeing the page with the code above? If so, please try the following code:

    jQuery(function($){
        $( '.et_pb_portfolio_filters a.active' ).click();
    });

    Let me know if that works for you. if not, then please remove both custom code and let me know.

    Have a nice day!

    Cheers,
    Ash

  • Daniel
    • Site Builder, Child of Zeus

    Hi there, well the issue is that while that code works if i try it in the Inspect Element consule section, its knowing where to put it in the Divi theme code area to get it to work.

    So am putting it in the Divi Theme, Integration section where it allows for code

    https://www.screencast.com/t/GkmLDVPnO0Qy

    I've put the following code in all of the sections.

    So we've been trying to put <script> around your code i.e.
    <script>
    jQuery(function($){
    $( '.et_pb_portfolio_filters a.active' ).click();
    });
    </script>

    Can you please help me find out how to put jscode in Divi.

    Thanks

    Daniel

  • Predrag Dubajic
    • Support

    Hi Daniel,

    Please try adding this code in Divi header script and that should do the trick:

    <script>
    	jQuery(function($){
    		setTimeout(function() {
    			$( '.et_pb_portfolio_filters a.active' ).click();
    		}, 100);
    	});
    </script>

    If it doesn't you can try increasing value of 100 to delay the code a bit more and that should do the trick.

    Best regards,
    Predrag

  • Daniel
    • Site Builder, Child of Zeus

    Great, ok that seems to work, although there is a bit of a delay while it shows all the excercises, it does end up taking them all out. I played with the number and it helps but still jumps, but it will do unless client wants it more seamless.

    Thanks for your help !

    DAniel

  • Dimitris
    • Support Star

    Hey there Daniel,

    hope you're doing good and don't mind chiming in here! :slight_smile:

    It seems that the first link you've shared is using an "active" class name inside first's link markup, while the second link doesn't.
    So, instead of targeting the new button with
    .et_pb_portfolio_filters a.active
    you should try something like
    .et_pb_portfolio_filters a:first-child

    <script>
    	jQuery(function($){
    		setTimeout(function() {
    			$( '.et_pb_portfolio_filters a:first-child' ).addClass('active').click();
    		}, 100);
    	});
    </script>

    Let us know if a script like this does the trick for you!
    Take care,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.