Форум

soloveff · #1 (**permalink**) 08.08.2013, 20:51

Подскажите пожалуйста, а как сделать так чтобы при нажатие на заголовок спойлера он исчезал и появлялось содержимое спойлера. А при нажатие на следующий заголовок, появлялся другой и исчезал этот.
Примерно как-то так) Пробовал так, но заголовок не появляется)
HTML:
<div class="box-letter">
<div class="letter open-letter">
<b>1</b><span></span>
</div>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<div class="box-letter">
<div class="letter open-letter">
<b>2</b><span></span>
</div>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>

CSS:

.box-letter ul {
display:none;
}
.open-letter span:after {
content:'раскрыть';
}

Script:

$(document).ready(function() {
$('.letter').click(function() {
$('div.box-letter ul').not($(this).parent().children('div.box-letter ul')).slideUp('normal').addClass('open-letter');
$(this).parent().children('div.box-letter ul').slideDown('normal');
$(this).addClass('open-letter');
$(this).removeClass('open-letter');
});
});

рони · #2 (**permalink**) 08.08.2013, 21:34

soloveff,
HTML ->

CSS ->

Script ->

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.box-letter ul {
 display:none;
 }
 .open-letter span:after {
 content:' раскрыть';
 }

  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
  $(document).ready(function() {
 $('.open-letter').click(function() {
 $('div.box-letter ul').not($(this).next()).slideUp('normal');
 $('.letter').addClass('open-letter');
 $(this).removeClass('open-letter').next().slideDown('normal');
 });
 });
  </script>
</head>

<body>
<div class="box-letter">
 <div class="letter open-letter">
 <b>1</b><span></span>
 </div>
 <ul>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 </ul>
 </div>
 <div class="box-letter">
 <div class="letter open-letter">
 <b>2</b><span></span>
 </div>
 <ul>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 </ul>
 </div>

</body>

</html>

soloveff · #3 (**permalink**) 08.08.2013, 22:18

рони, Спасибо тебе! А то голову сломал! Не шарю пока

Форум

Справочник

Discord чат

Курсы javascript