Подскажите, пожалуйста, как сделать аккордеон подобного плана, в тупик ставит не только код для javascript, но и что писать в html и css тоже не понимаю
-
уточните пожалуйста, что именно Вам непонятно? маловероятно, чтобы все было непонятно.– Alex15 окт 2016 в 22:45
-
нужно создать три блока почти идентичных, а потом в javascript сделать так, чтобы при нажатии на один остальные становились скрытыми? вот код в javascript для меня и неясен– Anastasiia15 окт 2016 в 22:47
-
Вам на javascript или на Jquery тоже подойдет?– Alex15 окт 2016 в 22:48
-
лучше чистый javascript– Anastasiia15 окт 2016 в 22:52
-
я когда-то писал аккордеон на чистом JS.. Посмотрите код - он совсем краткий, а вот тут простой пример– Zoltan Toth15 окт 2016 в 23:15
Добавить комментарий
|
1 ответ
function toogle(e) {
var elems = document.getElementsByClassName('test');
for (var i = 0; i < elems.length; i += 1) {
elems[i].childNodes[3].style.display = 'none';
}
e.childNodes[3].style.display = 'block';
}
div.test {
width: 300px;
margin-bottom: 5px;
border: 1px solid #cccccc;
}
div.test>.header {
padding: 5px;
height: 40px;
line-height: 40px;
background-color: #cccccc;
}
div.test>.text {
display:none;
padding: 5px;
height: 70px;
line-height: 70px;
background-color: #f2f2f2;
}
<div class="test" onclick="toogle(this)">
<div class="header">test</div>
<div class="text">test1 test1 test1 test1 test1</div>
</div>
<div class="test" onclick="toogle(this)">
<div class="header">test</div>
<div class="text">test2 test2 test2 test2 test2</div>
</div>
<div class="test" onclick="toogle(this)">
<div class="header">test</div>
<div class="text">test3 test3 test3 test3 test3</div>
</div>
-
рады помочь) однако помните, что комментарии предназначены только для уточнения вопроса/ответа, а не для слов благодарности хоть они и приятны). Не благодарите автора ответа в комментариях. Чтобы поблагодарить автора ответа, проголосуйте за ответ или отметьте его как решение.– Alex15 окт 2016 в 23:24
-
а что добавить в код, чтобы при запуске страницы элементы аккордеона не были в развернутом состоянии? 16 окт 2016 в 6:57
-
@Anastasiia так они сейчас в свернутом положении(элементы text каждого блока). Или Вы другое имеете ввиду?– Alex16 окт 2016 в 8:29
-
в вашем примере все в свернутом, я скопировала ваш код, заменила только в var elems = document.getElementsByClassName('test'); test на свое значение, но при загрузке страницы все блоки развернуты, необходимо нажать на один из них, чтобы он остался, а остальные свернулись 16 окт 2016 в 9:16
-
@Anastasiia это потому, что Вы стили не изменили. В скопированных стилях замените
.test
на Ваше значение. Говоря более просто, пропишите стильdisplay:none;
для Вашего значения класса.– Alex16 окт 2016 в 9:54