Using jquery to make an accordion effect, how to make the first block open by default?-CodePudding

I am using jquery to make a screen of questions and answers. I hope to click to open a question to close other questions! But there is a requirement that the first question should be opened first when entering the default screen, but I don’t know how to do it now. How to rewrite this program, I hope you can help me, thank you.

$(".sub_title_wrapper").on("click", function() {
  $(this).find(".open").toggleClass("active");
  $(this).parent().find(".sub_content").slideToggle();
  $(this).parent().find(".sub_content").toggleClass("active");
  $(this).parent().siblings().find(".sub_content").toggleClass("active");
  $(this).parent().siblings().find(".sub_content").slideUp();
  $(this).parent().siblings().find(".open").removeClass("active");
});

.content_list .list_item {
  border-bottom: 1px solid #222;
}

.content_list .list_item .sub_title_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 16px;
}

.content_list .list_item .sub_title_wrapper .open {
  width: 16px;
  height: 16px;
  background-size: cover;
  background-repeat: no-repeat;
  transition: 0.5s;
  transform: rotate(180deg);
}

.content_list .list_item .sub_title_wrapper .open.active {
  transform: rotate(0deg);
  color: #222;
}

.content_list .list_item .sub_title_wrapper .sub_title {
  cursor: pointer;
  font-size: 15px;
  color: #222;
}

.content_list .list_item .sub_title_wrapper .sub_title .symbol {
  display: none;
}

.content_list .list_item .sub_title_wrapper .sub_title.active {
  color: #000;
}

.content_list .list_item .sub_content {
  display: none;
  padding: 20px 16px;
}

.content_list .list_item .sub_content h4 {
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 8px;
}

.content_list .list_item .sub_content li {
  font-size: 15px;
  line-height: 1.5;
}

.content_list .list_item .sub_content.active {
  color: #222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul  style="display:block;">
  <li >
    <div >
      <h4 ><span >•</span>Title</h4>
      <button >V</button>
    </div>
    <ul >
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
  <li >
    <div >
      <h4 ><span >•</span>Title</h4>
      <button >V</button>
    </div>
    <ul >
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
  <li >
    <div >
      <h4 ><span >•</span>Title</h4>
      <button >V</button>
    </div>
    <ul >
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
  <li >
    <div >
      <h4 ><span >•</span>Title</h4>
      <button >V</button>
    </div>
    <ul >
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
  <li >
    <div >
      <h4 ><span >•</span>Title</h4>
      <button >V</button>
    </div>
    <ul >
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
</ul>

CodePudding user response：

Add this outside of your event listener:

$(".sub_title_wrapper").first().parent().find(".sub_content").slideToggle();
$(".sub_title_wrapper").first().find(".open").toggleClass("active");

This will ensure the first accordion & button icon is open on page load.

CodePudding user response：

When you generate your HTML, you can add the required classes/styles that your click function would add, ie:

<button >V</button>

<ul  style='display:block;'>

Then your HTML will be rendered already open and you won't get a FOUC caused by a js solution.

Updated snippet:

$(".sub_title_wrapper").on("click", function() {
  $(this).find(".open").toggleClass("active");
  $(this).parent().find(".sub_content").slideToggle();
  $(this).parent().find(".sub_content").toggleClass("active");
  $(this).parent().siblings().find(".sub_content").toggleClass("active");
  $(this).parent().siblings().find(".sub_content").slideUp();
  $(this).parent().siblings().find(".open").removeClass("active");
});

.content_list .list_item {
  border-bottom: 1px solid #222;
}

.content_list .list_item .sub_title_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 16px;
}

.content_list .list_item .sub_title_wrapper .open {
  width: 16px;
  height: 16px;
  background-size: cover;
  background-repeat: no-repeat;
  transition: 0.5s;
  transform: rotate(180deg);
}

.content_list .list_item .sub_title_wrapper .open.active {
  transform: rotate(0deg);
  color: #222;
}

.content_list .list_item .sub_title_wrapper .sub_title {
  cursor: pointer;
  font-size: 15px;
  color: #222;
}

.content_list .list_item .sub_title_wrapper .sub_title .symbol {
  display: none;
}

.content_list .list_item .sub_title_wrapper .sub_title.active {
  color: #000;
}

.content_list .list_item .sub_content {
  display: none;
  padding: 20px 16px;
}

.content_list .list_item .sub_content h4 {
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 8px;
}

.content_list .list_item .sub_content li {
  font-size: 15px;
  line-height: 1.5;
}

.content_list .list_item .sub_content.active {
  color: #222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul  style="display:block;">
  <li >
    <div >
      <h4 ><span >•</span>Title</h4>
      <button >V</button>
    </div>
    <ul  style='display:block;'>
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
  <li >
    <div >
      <h4 ><span >•</span>Title</h4>
      <button >V</button>
    </div>
    <ul >
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
  <li >
    <div >
      <h4 ><span >•</span>Title</h4>
      <button >V</button>
    </div>
    <ul >
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
  <li >
    <div >
      <h4 ><span >•</span>Title</h4>
      <button >V</button>
    </div>
    <ul >
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
  <li >
    <div >
      <h4 ><span >•</span>Title</h4>
      <button >V</button>
    </div>
    <ul >
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
</ul>