Помогите! Пожалуйста!

Как сделать что б в списке первая кнопка была уже отжата изначально?

 

Как сделать что б в списке первая кнопка была уже отжата изначально?
<script>
var lastOpen;
function collapsElement(id) {
if ( document.getElementById(id).style.display != "none" ) {
document.getElementById(id).style.display = 'none';
}
else {
if(lastOpen !== undefined) {
lastOpen.style.display = 'none';
}
lastOpen = document.getElementById(id);
document.getElementById(id).style.display = '';
}
}
</script>

--- Добавлено, 1 мар 2019 ---

<div class="aa1">
<div class="aa11">
<div class="a1"><a href="javascript:collapsElement('identifikator')" title="" rel="nofollow"><button>ПОЭТАПНАЯ ОПЛАТА</button></a></div>
<div class="a2"><a href="javascript:collapsElement('identifikator1')" title="" rel="nofollow"><button>ПОЛНЫЙ ЦИКЛ РАБОТ</button></a></div>
<br /><div class="a3"><a href="javascript:collapsElement('identifikator3')" title="" rel="nofollow"><button>БЕСПЛАТНЫЕ УСЛУГИ</button></a></div>
<div class="a4"><a href="javascript:collapsElement('identifikator4')" title="" rel="nofollow"><button>СОВРЕМЕННЫЕ ТЕХНОЛОГИИ</button></a></div>
<br /><div class="a5"><a href="javascript:collapsElement('identifikator5')" title="" rel="nofollow"><button>ОРИГИНАЛЬНЫЕ<br />АРХИТЕКТУРНЫЕ<br />РЕШЕНИЯ</button></a></div>
<div class="a6"><a href="javascript:collapsElement('identifikator6')" title="" rel="nofollow"><button>ВЫСОКОЕ<br />КАЧЕСТВО<br />СТРОИТЕЛЬСТВА</button></a></div>
</div>
<div class="aa22">
<div id="identifikator" style="display: none"><p><img src="http://xn--80aaeajescwgnrbebbyrfodd2uoa.xn--p1ai/wp-content/uploads/2019/02/885.png" /></p></div>
<div id="identifikator1" style="display: none"><p><img src="http://xn--80aaeajescwgnrbebbyrfodd2uoa.xn--p1ai/wp-content/uploads/2019/02/886.png" /></p></div>
<div id="identifikator3" style="display: none"><p><img src="http://xn--80aaeajescwgnrbebbyrfodd2uoa.xn--p1ai/wp-content/uploads/2019/02/888.png" /></p></div>
<div id="identifikator4" style="display: none"><p><img src="http://xn--80aaeajescwgnrbebbyrfodd2uoa.xn--p1ai/wp-content/uploads/2019/02/899.png" /></p></div>
<div id="identifikator5" style="display: none"><p><img src="http://xn--80aaeajescwgnrbebbyrfodd2uoa.xn--p1ai/wp-content/uploads/2019/02/062.png" /></p></div>
<div id="identifikator6" style="display: none"><p><img src="http://xn--80aaeajescwgnrbebbyrfodd2uoa.xn--p1ai/wp-content/uploads/2019/02/788.png" /></p></div>

</div>
</div>

 

Для того, чтобы первая кнопка была отжата изначально, можно добавить класс с CSS свойством `display: none` к первому элементу списка с помощью JavaScript.

javascript

Код:

var lastOpen;
function collapsElement(id) {
  if (document.getElementById(id).style.display != "none") {
    document.getElementById(id).style.display = "none";
  } else {
    if (lastOpen !== undefined) {
      lastOpen.style.display = "none";
    }
    lastOpen = document.getElementById(id);
    document.getElementById(id).style.display = "";
  }
}

// Добавляем класс "hidden" к первому элементу списка
document.getElementById("identifikator").classList.add("hidden");

Затем нужно добавить CSS правило для класса "hidden", которое скрывает элемент:

css

Код:

.hidden {
  display: none;
}

Исправленный HTML код:

HTML:

<div class="aa1">
  <div class="aa11">
    <div class="a1">
      <a href="javascript:collapsElement('identifikator')" title="" rel="nofollow"
        ><button>ПОЭТАПНАЯ ОПЛАТА</button></a
      >
    </div>
    <div class="a2">
      <a href="javascript:collapsElement('identifikator1')" title="" rel="nofollow"
        ><button>ПОЛНЫЙ ЦИКЛ РАБОТ</button></a
      >
    </div>
    <br />
    <div class="a3">
      <a href="javascript:collapsElement('identifikator3')" title="" rel="nofollow"
        ><button>БЕСПЛАТНЫЕ УСЛУГИ</button></a
      >
    </div>
    <div class="a4">
      <a href="javascript:collapsElement('identifikator4')" title="" rel="nofollow"
        ><button>СОВРЕМЕННЫЕ ТЕХНОЛОГИИ</button></a
      >
    </div>
    <br />
    <div class="a5">
      <a href="javascript:collapsElement('identifikator5')" title="" rel="nofollow"
        ><button>ОРИГИНАЛЬНЫЕ<br />АРХИТЕКТУРНЫЕ<br />РЕШЕНИЯ</button></a
      >
    </div>
    <div class="a6">
      <a href="javascript:collapsElement('identifikator6')" title="" rel="nofollow"
        ><button>ВЫСОКОЕ<br />КАЧЕСТВО<br />СТРОИТЕЛЬСТВА</button></a
      >
    </div>
  </div>
  <div class="aa22">
    <div id="identifikator"><p><img src="/wp-content/uploads/2023/04/1.png" /></p></div>
    <div id="identifikator1" style="display: none"><p><img src="/wp-content/uploads/2023/04/2.png" /></p></div>
    <div id="identifikator3" style="display: none"><p><img src="/wp-content/uploads/2023/04/3.png" /></p></div>
    <div id="identifikator4" style="display: none"><p><img src="/wp-content/uploads/2023/04/4.png" /></p></div>
    <div id="identifikator5" style="display: none"><p><img src="/wp-content/uploads/2023/04/5.png" /></p></div>
    <div id="identifikator6" style="display: none"><p><img src="/wp-content/uploads/2023/04/6.png" /></p></div>
  </div>
</div>