Я нашел несколько полезных ответов, которые помогут мне использовать java для расширения и сглаживания содержимого, но теперь я не могу понять, как сделать его только расширяющимся по одному... Так что, когда один div будет расширен, если вы нажмете на разверните еще один, он разрушит первый. Есть идеи? Вот скрипка и код. Пожалуйста помоги!
http://jsfiddle.net/eK8X5/248/
HTML:
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
CSS:
.container .content {
display: none;
padding : 5px;
}
Сценарий:
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Взгляните на http://getbootstrap.com/2.3.2/javascript.html#collapse. Вы увидите отличный пример меню аккордеона. Вы можете реализовать его, просто используя Bootstrap и файл javascript Bootstrap. Или вы можете вникнуть в свой код и посмотреть, как они это делают. Я бы посоветовал выяснить, как они это делают, чтобы вы могли приспособить его по мере необходимости. Просто потому, что его Bootstrap не означает его лучший способ сделать это.
Пытаться
var $contents = $(".content")
var $headers = $(".header").click(function () {
var $header = $(this);
//getting the next element
var $content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.stop(true, true).slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
$headers.not($header).text("Expand");
$contents.not($content).stop(true, true).slideUp();
});
Демо: скрипка