Sam Vorst Ответов: 1

Первый пункт аккордеон открыт при загрузке страницы

Привет,

Я построил аккордеон, и я хочу, чтобы первый элемент был открыт при загрузке страницы.
Как я могу сделать это с помощью Jquery?

Это мой код.:
<script>
  $(document).ready(function(){
    $(".accordion_header").click(function() {
      $(".accordion_header").removeClass("active");
      $(this).addClass("active");
    })
  });
</script>


HTML:

<div class="wrapper">
       <div class="accordion_wrap">
         <div class="accordion_header">
           <h5>INFO</h5>
         </div>
         <div class="accordion_body">
         <p>Lorem ipsum dolor sit amet,<br>
         consectetur adipiscing elit. <br></p>
         </div>
       </div>
       <div class="accordion_wrap">
         <div class="accordion_header">
           <h5>INFO</h5>
         </div>
         <div class="accordion_body">
         <p>Lorem ipsum dolor sit amet,<br>
         consectetur adipiscing elit. <br></p>
         </div>
       </div>
       <div class="accordion_wrap">
         <div class="accordion_header">
           <h5>INFO</h5>
         </div>
         <div class="accordion_body">
         <p>Lorem ipsum dolor sit amet,<br>
         consectetur adipiscing elit. <br></p>
         </div>
       </div>
     </div>


css очень длинный и, я думаю, ненужный.

Спасибо,
Сэм

Что я уже пробовал:

Попробовал поискать в интернете, и у меня есть код выше.

Gerry Schmitz

Что загружается сейчас, если не "первый"?

Sam Vorst

Сейчас они все закрыты.

1 Ответов

Рейтинг:
6

Richard Deeming

Либо добавьте active класс к первому элементу разметки:

<div class="accordion_wrap">
    <div class="accordion_header active">
        <h5>INFO</h5>
    </div>
или добавьте его через скрипт:
$(function(){
    $(".accordion_header").click(function() {
        $(".accordion_header").removeClass("active");
        $(this).addClass("active");
    });
    
    $(".accordion_header:first").addClass("active");
});

NB: Обратите внимание на документацию:
.ready() | документация по API jQuery[^]:

jQuery предлагает несколько способов прикрепить функцию, которая будет работать, когда DOM будет готов. Все следующие синтаксисы эквивалентны:
  • $( handler )
  • $( document ).ready( handler )
  • $( "document" ).ready( handler )
  • $( "img" ).ready( handler )
  • $().ready( handler )

Начиная с jQuery 3.0, рекомендуется использовать только первый синтаксис; другие синтаксисы все еще работают, но устарели.

Sam Vorst

Спасибо!!!