Click Button on Page load

Question

I am currently trying to implement an accordion like section using buttons. If the user clicks on one button, the content shows. However i want the section of the second button to be shown on default. Is there any way to do that?

This is my code right now:

 jQuery(function() { jQuery('.ss_button').on('click', function() { jQuery('.ss_content').slideUp('fast'); jQuery(this).next('.ss_content').slideDown('fast'); }); });

 #ss_menu { width: auto; } .ss_button { background-color: #049132; border-bottom: 1px solid #FFFFFF; cursor: pointer; padding: 10px; margin-bottom: 5px; color: #FFFFFF; } .ss_content { background-color: white; display: none; padding: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="ss_menu"> <div class="ss_button">Einsteiger</div> <div class="ss_content"> <p>Test1</p> </div> <div class="ss_button">Mittelklasse</div> <div class="ss_content"> <p>Test2</p> </div> <div class="ss_button">High-End</div> <div class="ss_content"> <p>Test3</p> </div> </div>

Answer 1

You can do it in a few way, 1 could be:

jQuery('.ss_content').eq(1).show();

or you can trigger the click event of the first ss_button

jQuery('.ss_button').eq(1).click();

DEMO

 jQuery(function() { jQuery('.ss_button').on('click', function() { jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast'); jQuery(this).next('.ss_content').slideToggle('fast'); }); jQuery('.ss_content').eq(1).show(); });

 #ss_menu { width: auto; } .ss_button { background-color: #049132; border-bottom: 1px solid #FFFFFF; cursor: pointer; padding: 10px; margin-bottom: 5px; color: #FFFFFF; } .ss_content { background-color: white; display: none; padding: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="ss_menu"> <div class="ss_button">Einsteiger</div> <div class="ss_content"> <p>Test1</p> </div> <div class="ss_button">Mittelklasse</div> <div class="ss_content"> <p>Test2</p> </div> <div class="ss_button">High-End</div> <div class="ss_content"> <p>Test3</p> </div> </div>

Answer 2

As alternative to "click the button to show on page load" you can show the required content by overriding the display:none .

This also has the bonus of not having the FOUC (flash of unstyled content) that you get when running js to setup your page (especially if have a lot of js or a large page that must load before doc.ready can run).

Of course, this may not be possible in all cases, so provided as an alternative.

 jQuery(function() { jQuery('.ss_button').on('click', function() { jQuery('.ss_content').slideUp('fast'); jQuery(this).next('.ss_content').slideDown('fast'); }); });

 #ss_menu { width: auto; } .ss_button { background-color: #049132; border-bottom: 1px solid #FFFFFF; cursor: pointer; padding: 10px; margin-bottom: 5px; color: #FFFFFF; } .ss_content { background-color: white; display: none; padding: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="ss_menu"> <div class="ss_button">Einsteiger</div> <div class="ss_content"> <p>Test1</p> </div> <div class="ss_button">Mittelklasse</div> <div class="ss_content" style='display:block;'> <p>Test2</p> </div> <div class="ss_button">High-End</div> <div class="ss_content"> <p>Test3</p> </div> </div>