jquery div展开和折叠问题

Question

current code loads div as collapsed and then on click it works as expand/ collapse

i want whenever page loads it should open as expanded div and then on click it should work as collapse/expand.

here is current code:-

 $(".header").click(function () { $header = $(this); //getting the next element $content = $header.next(); //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. $content.slideToggle(500, function () { //execute this after slideToggle is done //change text of header based on visibility of content div $header.text(function () { //change text based on condition return $content.is(":visible") ? "Collapse" : "Expand"; }); }); });

 .container { width:100%; border:1px solid #d3d3d3; } .container div { width:100%; } .container .header { background-color:#d3d3d3; padding: 2px; cursor: pointer; font-weight: bold; } .container .content { display: none; padding : 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="header"><span>Expand</span> </div> <div class="content"> <ul> <li>This is just some random content.</li> <li>This is just some random content.</li> <li>This is just some random content.</li> <li>This is just some random content.</li> </ul> </div> </div>

Answer 1

You need to update just 2 lines

<div class="header"><span>Collapse</span>

And

.container .content {
    display: block; // none in your code
    padding : 5px;
}

Please run the following code

 $(".header").click(function () { $header = $(this); //getting the next element $content = $header.next(); //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. $content.slideToggle(500, function () { //execute this after slideToggle is done //change text of header based on visibility of content div $header.text(function () { //change text based on condition return $content.is(":visible") ? "Collapse" : "Expand"; }); }); });

 .container { width:100%; border:1px solid #d3d3d3; } .container div { width:100%; } .container .header { background-color:#d3d3d3; padding: 2px; cursor: pointer; font-weight: bold; } .container .content { display: block; padding : 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="header"><span>Collapse</span> </div> <div class="content"> <ul> <li>This is just some random content.</li> <li>This is just some random content.</li> <li>This is just some random content.</li> <li>This is just some random content.</li> </ul> </div> </div>

Answer 2

You can try:

$(document).ready(function(){
   $(".header").trigger("click");
})

This will trigger the click event once the whole document has been loaded entirely. Sorry I have to write this on answer instead of comments, so it can be read easily.