Аккордеон в jquery

514

26 ноября 2016, 18:51

Как сделать, чтобы появляющийся текст вылазил наверх?

$(".closed .block").hide(); 
$(".hide").click(function() { 
  $(this).toggleClass("show").next().slideToggle("fast"); 
});

.box { 
  background: #fff; 
  margin-bottom: 10px; 
  width: 300px; 
  padding: 0; 
  margin: 40px auto; 
  position: relative; 
  overflow: hidden; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -webkit-box-shadow: 0 0 10px #DCDCDC inset; 
  -moz-box-shadow: 0 0 10px #DCDCDC inset; 
  box-shadow: 0 0 10px #DCDCDC inset; 
} 
.box h2 { 
  font-size: 1em; 
  font-weight: 700; 
  text-transform: uppercase; 
  color: #444; 
  background: #ddd; 
  margin: 0 -10px -1px -10px; 
  padding: 12px; 
  padding-left: 15px; 
  padding-right: 45px; 
  -webkit-box-shadow: 0 0 10px #DCDCDC inset; 
  -moz-box-shadow: 0 0 10px #DCDCDC inset; 
  box-shadow: 0 0 10px #DCDCDC inset; 
  border-radius: 5px 5px 0 0; 
  -moz-border-radius: 5px 5px 0 0; 
  -webkit-border-radius: 5px 5px 0 0; 
} 
.block { 
  padding: 0; 
} 
.block_in { 
  padding: 12px; 
} 
.box div.hide { 
  display: block; 
  width: 40px; 
  line-height: 24px; 
  position: absolute; 
  right: 5px; 
  top: 8px; 
  cursor: pointer; 
  font-size: 10px; 
  text-transform: uppercase; 
  text-align: center; 
  border: solid 1px #aaa; 
  background: #f5f5f5; 
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -webkit-box-shadow: 0 0 4px #DCDCDC inset; 
  -moz-box-shadow: 0 0 4px #DCDCDC inset; 
  box-shadow: 0 0 4px #DCDCDC inset; 
} 
.box div.hide:hover { 
  background: #fff; 
} 
.box div.hide span.h { 
  display: block; 
} 
.box div.hide span.s { 
  display: none; 
} 
.box div.show span.h { 
  display: none; 
} 
.box div.show span.s { 
  display: block; 
} 
.closed div.hide span.h { 
  display: none; 
} 
.closed div.hide span.s { 
  display: block; 
} 
.closed div.show span.h { 
  display: block; 
} 
.closed div.show span.s { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="box closed"> 
  <h2>Toggle 
    <span class="l"></span> 
    <span class="r"></span> 
  </h2> 
  <div class="hide"> 
    <span class="s">Show</span> 
    <span class="h">Hide</span> 
  </div> 
  <div class="block"> 
    <div class="block_in"> 
      буквыбуквыбуквы 
    </div> 
  </div> 
</div>

Answer 1

Как сделать, чтобы появляющийся текст вылазил наверх?

Для этого Вам нужно поставить блок .block над h2 и изменить код jquery:

$(".closed .block").hide(); 
$(".hide").click(function() { 
  $(this).toggleClass("show").closest(".box").find(".block").slideToggle("fast"); 
});

.box { 
  background: #fff; 
  margin-bottom: 10px; 
  width: 300px; 
  padding: 0; 
  margin: 40px auto; 
  position: relative; 
  overflow: hidden; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -webkit-box-shadow: 0 0 10px #DCDCDC inset; 
  -moz-box-shadow: 0 0 10px #DCDCDC inset; 
  box-shadow: 0 0 10px #DCDCDC inset; 
} 
.box h2 { 
  font-size: 1em; 
  font-weight: 700; 
  text-transform: uppercase; 
  color: #444; 
  background: #ddd; 
  margin: 0 -10px -1px -10px; 
  padding: 12px; 
  padding-left: 15px; 
  padding-right: 45px; 
  -webkit-box-shadow: 0 0 10px #DCDCDC inset; 
  -moz-box-shadow: 0 0 10px #DCDCDC inset; 
  box-shadow: 0 0 10px #DCDCDC inset; 
  border-radius: 5px 5px 0 0; 
  -moz-border-radius: 5px 5px 0 0; 
  -webkit-border-radius: 5px 5px 0 0; 
} 
.block { 
  padding: 0; 
} 
.block_in { 
  padding: 12px; 
} 
.box div.hide { 
  display: block; 
  width: 40px; 
  line-height: 24px; 
  position: absolute; 
  right: 5px; 
  top: 8px; 
  cursor: pointer; 
  font-size: 10px; 
  text-transform: uppercase; 
  text-align: center; 
  border: solid 1px #aaa; 
  background: #f5f5f5; 
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -webkit-box-shadow: 0 0 4px #DCDCDC inset; 
  -moz-box-shadow: 0 0 4px #DCDCDC inset; 
  box-shadow: 0 0 4px #DCDCDC inset; 
} 
.box div.hide:hover { 
  background: #fff; 
} 
.box div.hide span.h { 
  display: block; 
} 
.box div.hide span.s { 
  display: none; 
} 
.box div.show span.h { 
  display: none; 
} 
.box div.show span.s { 
  display: block; 
} 
.closed div.hide span.h { 
  display: none; 
} 
.closed div.hide span.s { 
  display: block; 
} 
.closed div.show span.h { 
  display: block; 
} 
.closed div.show span.s { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="box closed"> 
  <div class="block"> 
    <div class="block_in"> 
      буквыбуквыбуквы 
    </div> 
  </div> 
  <h2>Toggle 
    <span class="l"></span> 
    <span class="r"></span> 
  </h2> 
  <div class="hide"> 
    <span class="s">Show</span> 
    <span class="h">Hide</span> 
  </div> 
 
</div>

UPD:

Данный вариант позволяет тексту появляться вверху h2, но при этом h2смещается вниз. Если Вам нужно, чтобы h2 был неподвижен, а появляющийся текст не сдвигал его, а двигался вверх, то Вам нужно переделать стили блоков box, block, h2, например так:

$(".closed .block").hide(); 
$(".hide").click(function() { 
  $(this).toggleClass("show").closest(".box").find(".block").slideToggle("fast"); 
});

.box { 
  background: #fff; 
  margin-bottom: 10px; 
  width: 300px; 
  padding: 0; 
  margin: 40px auto; 
  position: relative; 
  /*overflow: hidden;*/ 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -webkit-box-shadow: 0 0 10px #DCDCDC inset; 
  -moz-box-shadow: 0 0 10px #DCDCDC inset; 
  box-shadow: 0 0 10px #DCDCDC inset; 
} 
.box h2 { 
  font-size: 1em; 
  font-weight: 700; 
  text-transform: uppercase; 
  color: #444; 
  background: #ddd; 
  margin: 0 0px -1px 0px; 
  padding: 12px; 
  padding-left: 15px; 
  padding-right: 45px; 
  -webkit-box-shadow: 0 0 10px #DCDCDC inset; 
  -moz-box-shadow: 0 0 10px #DCDCDC inset; 
  box-shadow: 0 0 10px #DCDCDC inset; 
  border-radius: 5px 5px 0 0; 
  -moz-border-radius: 5px 5px 0 0; 
  -webkit-border-radius: 5px 5px 0 0; 
} 
.block { 
  padding: 0; 
  background: #fff; 
  width: 300px; 
  padding: 0; 
  margin-top: -45px; 
  position: absolute; 
  z-index: 1; 
  border: 1px solid #ccc; 
  border-radius: 5px 5px 0 0; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -webkit-box-shadow: 0 0 10px #DCDCDC inset; 
  -moz-box-shadow: 0 0 10px #DCDCDC inset; 
  box-shadow: 0 0 10px #DCDCDC inset; 
} 
.block_in { 
  padding: 12px; 
} 
.box div.hide { 
  display: block !important; 
  width: 40px; 
  line-height: 24px; 
  position: absolute; 
  right: 5px; 
  top: 8px; 
  cursor: pointer; 
  font-size: 10px; 
  text-transform: uppercase; 
  text-align: center; 
  border: solid 1px #aaa; 
  background: #f5f5f5; 
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -webkit-box-shadow: 0 0 4px #DCDCDC inset; 
  -moz-box-shadow: 0 0 4px #DCDCDC inset; 
  box-shadow: 0 0 4px #DCDCDC inset; 
} 
.box div.hide:hover { 
  background: #fff; 
} 
.box div.hide span.h { 
  display: block; 
} 
.box div.hide span.s { 
  display: none; 
} 
.box div.show span.h { 
  display: none; 
} 
.box div.show span.s { 
  display: block; 
} 
.closed div.hide span.h { 
  display: none; 
} 
.closed div.hide span.s { 
  display: block; 
} 
.closed div.show span.h { 
  display: block; 
} 
.closed div.show span.s { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="box closed"> 
  <div class="block"> 
    <div class="block_in"> 
      буквыбуквыбуквы 
    </div> 
  </div> 
  <h2>Toggle 
    <span class="l"></span> 
    <span class="r"></span> 
  </h2> 
  <div class="hide"> 
    <span class="s">Show</span> 
    <span class="h">Hide</span> 
  </div> 
</div>

Создание интернет-магазина одежды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Код для аккордеона

Подскажите, пожалуйста, как сделать аккордеон подобного плана, в тупик ставит не только код для javascript, но и что писать в html и css тоже не понимаю

418

CSS

Переключение слайдов в bootstrap

Не понимаю почему сдвигаются вниз кнопки выбора слайдов:

437

CSS

Цвет лого как цвет фона

Есть фиксированная шапкаПри прокручивании сайта лого должно применять цвет фона, на котором оно находится

328

CSS

Как в адаптивном сайте с изменяемой высотой футера, прибить его к низу страницы

Есть адаптивный сайт на bootstrapНа некоторых страницах футер "подпрыгивает" вверх

415