Переключите div для показа по клику, а другой переключите, чтобы скрыть

Question

Переключите div для показа по клику, а другой переключите, чтобы скрыть

0

Есть два 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" );
});

Скрипки:

http://jsfiddle.net/ZB8u9/1/

isaac weathers 20 янв. 2014, в 15:42

Источник

0

Какие 2 деления? подробное и общее? Вы имеете в виду элементы li ?
Sergio 20 янв. 2014, в 14:15
0

что ты пытаешься сделать?
Arun Chandran C 20 янв. 2014, в 14:16
0

Тогда -> jsfiddle.net/ZB8u9/5
adeneo 20 янв. 2014, в 14:18

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

slidetoggle

slidedown

3 ответа

1

Я думаю, вам нужно сначала скрыть одну из них, иначе это немного вздор. Мое предложение

$( "#expandedTerms" ).hide();
$( "#editButton" ).click(function() {
    $( "#basicTermsRow" ).slideToggle();
    $( "#expandedTerms" ).slideToggle();
});

sis 20 янв. 2014, в 12:32

0

Если я правильно понимаю, учитывая, что эти две записи являются позициями, я бы предложил назначить им класс, чтобы вы могли применить любой вид переключения, который вы хотите к каждому из них. См. Пример JSFiddle.

$( "#editButton" ).click(function() {
$( ".hideDiv" ).slideToggle("fast");}
);

Craighead 20 янв. 2014, в 12:30

Ещё вопросы

Какие 2 деления? подробное и общее? Вы имеете в виду элементы li ?

EasyPush · Accepted Answer · 2014-01-20T12-23-00.000Z

Первое, что вам нужно сделать, это сделать скрытый расширенный div. Затем для достижения того, что вы хотите, вы можете просто переключать оба div, когда пользователь нажимает кнопку. Как это:

<div id="expandedTerms" style="display:none">

Хотя он предпочитает делать скрытие в CSS, чтобы избежать встроенного стиля.

Сценарий будет выглядеть так:

$( "#editButton" ).click(function() {
  $( "#basicTermsRow" ).slideToggle( "fast" );
  $( "#expandedTerms" ).slideToggle( "fast" );
});

http://jsfiddle.net/ZB8u9/3/

Вот и все. Спасибо. Мозг не работает сегодня утром. Я проверю это как ответ через пять минут, когда он мне даст. Спасибо, просто!