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

Question

[Ольга Назарова]

<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>


сам код:
<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>

Comments

[Артем]

Что значит нажата?

[Ольга Назарова]

Артем, что бы активная была, как будто на нее нажали) вот так
сейчас выглядит все вот так

пока не нажмешь справа описание не открыто.

[Rustam Bainazarov]

grigoryolga, кликайте по ней скриптом при загрузке страницы :))

[Ольга Назарова]

SmthTo, Как?))) 3 день сижу, со скриптами не особа знакома, умаялась вся...

[Артем]

Ольга Назарова,

document.addEventListener('DOMContentLoaded', function(){
  var button = document.querySelector('.a1')
  if (button) {
    button.click()
  }
});

[Ольга Назарова]

Артем, Я же правильно вставила его? не работает(

[Артем]

Ольга Назарова,

window.onload = function() {
  var button = document.querySelector('.a1')
  if (button) {
    button.click()
  }
}

Попробуйте так

[Ольга Назарова]

эх ... ничего не подходит ( Спасибо за помощь)!

[Ankhena]

Ольга Назарова, button внутри ссылки это вы вообще себе как представляете? Определитесь либо кнопка либо ссылка.

По теме вопроса: активный класс допишите к нужной кнопке сразу допишите в разметке.

[Ольга Назарова]

Ankhena, мне так нужно все отлично село, просто ни один скрипт не работает, на активацию при загрузке

[Ankhena]

Ольга Назарова, Ольга, так делать нельзя. Попробуйте описать зачем это нужно и появится нормальное решение.

[Ольга Назарова]

Ankhena, мне нужен именно такой вид кнопок( когда проставляла background на ссылку, при активации :focus, у меня кнопка сдвигалась, так и не нашла где и что за это отвечает, а кнопка прописалась. а почему нельзя? на что это влияет? Это шаблон вордпресса, я просто его переделала весь. вот и не нашла почему так скачет.

[Ankhena]

Ольга Назарова, выложите код, где она не правильно сдвигалась.
Вот вам пример, где одинаково выглядят кнопка, ссылка и вообще спан (чтобы не скучно было), при фокусе они тоже ведут себя одинаково.
https://jsfiddle.net/so2at56b/

[Ольга Назарова]

Ankhena,

<div class="a1"><button onclick="javascript:collapsElement('identifikator')">ПОЭТАПНАЯ ОПЛАТА</button></div>

а так корректно будет прописать?

[Ankhena]

Ольга Назарова, корректно, но див похоже, тоже лишний :)

[Ankhena]

Ольга Назарова, примерно так: https://jsfiddle.net/2fz1gw7k/2/
В разметке вешаете класс на первый элемент. При клике всем убираете и перевешиваете на кликнутый.

Если что, то тоже самое можно и на чистом html+css делать, без js. Но это от верстки и целей зависит.

[Ankhena]

Ольга Назарова, как-то вы интересно пишите и стираете.
Неработающий код выкладывайте в песочницу, а сюда.

А по тем вопросам, что были - где же у вас строчки отвечающие за добавление класса вторым блокам?
(слово main пишется так, а не mane)

Работающий образец выше.

[Ольга Назарова]

Ankhena, Извиняюсь я его только потом увидела) поэтому удалила) сейчас попробую рабочий вариант, спасибо громаднейшее!!!

[Ольга Назарова]

Ankhena, Извините пж, я походу вообще уже не сооборажаю((

<script>
let btns = document.querySelectorAll(".btn");
let contents = document.querySelectorAll(".aa22 > div");

for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(evt) {

    Array.from(btns).forEach(item => {
      item.classList.remove("active");
    });
    Array.from(contents).forEach(item => {
      item.classList.remove("active");
    });

    this.classList.add("active");
    contents[i].classList.add("active");

    //console.log(Array.from(btns));

  })
}
</script>

скрипт же в таком виде закинуть между head и /head, он у меня почему то не подключается

[Ankhena]

Ольга Назарова, про console.log только совсем стереть.

Скрипты пишутся перед закрывающим body.

[Ольга Назарова]

Ankhena, Получилось!!!! Спасибоооо вам большое!! 3 дня мучалась!

[Ankhena]

Ольга Назарова, погуглите "табы на чистом css".

[Ольга Назарова]

Ankhena, Спасибо, обязательно просмотрю! Не знаю что бы без вас делала!

Answer 1

[Ольга Назарова]

Ankhena Ankhena @Ankhena
Ольга Назарова, примерно так: https://jsfiddle.net/2fz1gw7k/2/
В разметке вешаете класс на первый элемент. При клике всем убираете и перевешиваете на кликнутый.

Answer 2

[Артем]

Задайте блок по-умолчанию. В html уберите display: none у того блока, который хотите показывать при загрузке страницы и, соответственно, кнопке нужно будет добавить класс.
Это самый простой способ.

Comments

[Ольга Назарова]

он открывается да
но при нажатии другой кнопки не пропадает

[Артем]

Ольга Назарова,

var lastOpen = document.querySelector('#identifikator');
...