Есть два divs, которые представляют одни и те же данные, только один из них более подробно. На кнопку нажмите, мне нужно свернутьToggle первого div, а затем переключить open или slideDown второй. В основном, выключение того, что показано, но оно должно быть в двух отдельных div, поэтому он не может быть основным переключателем в одном div. Любые идеи:
html: EDIT
<div id="basicTermsRow">
<div class="row">
<div class="col-sm-4">
<div class="standardList">
<ul>
<li>Random Data</li>
<li>This be the div I need to hide<span class="glyphicon glyphicon-cloud"></span></li>
</ul>
</div>
</div>
</div>
</div>
<div id="expandedTerms">
<div class="row">
<div class="col-lg-12">
<p>Good Bye</p>
</div>
ЯШ:
$( "#editButton" ).click(function() {
$( "#basicTermsRow" ).slideToggle( "fast" );
});
Скрипки:
Первое, что вам нужно сделать, это сделать скрытый расширенный div. Затем для достижения того, что вы хотите, вы можете просто переключать оба div, когда пользователь нажимает кнопку. Как это:
<div id="expandedTerms" style="display:none">
Хотя он предпочитает делать скрытие в CSS, чтобы избежать встроенного стиля.
Сценарий будет выглядеть так:
$( "#editButton" ).click(function() {
$( "#basicTermsRow" ).slideToggle( "fast" );
$( "#expandedTerms" ).slideToggle( "fast" );
});
Я думаю, вам нужно сначала скрыть одну из них, иначе это немного вздор. Мое предложение
$( "#expandedTerms" ).hide();
$( "#editButton" ).click(function() {
$( "#basicTermsRow" ).slideToggle();
$( "#expandedTerms" ).slideToggle();
});
Если я правильно понимаю, учитывая, что эти две записи являются позициями, я бы предложил назначить им класс, чтобы вы могли применить любой вид переключения, который вы хотите к каждому из них. См. Пример JSFiddle.
$( "#editButton" ).click(function() {
$( ".hideDiv" ).slideToggle("fast");}
);
li
?