CODEWITHSUNDEEP
javascripthtmljqueryonclick
Jonas Linde
Jonas Linde

Reputation: 69

Click Button on Page load

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>

Upvotes: 0

Views: 50

Answers (2)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

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>

Upvotes: 2

fdomn-m
fdomn-m

Reputation: 28611

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>

Upvotes: 1

Related Questions