jQuery collapse скрыть другие элементы

Я работаю в простой системе коллапса и отлично работает ... но в каждом элементе collapse есть дополнительный элемент, такой как summery p tag, и когда я нажимаю на любой элемент, который скрывает тэг и полный контент покажет ... его на самом деле работает, но эффект другие детали тоже .. но это не должно быть ...jQuery collapse скрыть другие элементы

HTML код:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
     <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
       Collapsible Group Item #1 
      </a> 
      </h4> 
     </div> 
     <p class="summery">this is summery</p> 
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
      Full content Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
      </div> 
     </div> 
     </div> 
    </div> 

    <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true"> 
     <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapsetwo" aria-expanded="true" aria-controls="collapseOne"> 
       Collapsible Group Item #2 
      </a> 
      </h4> 
     </div> 
     <p class="summery">this is summery2</p> 
     <div id="collapsetwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
      Full content Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
      </div> 
     </div> 
     </div> 
    </div>

JS код:

$('.panel-heading > .panel-title').click(function(){ 
    $('.panel > p.summery').toggle(); 

});

JSFIDDLE Ссылка:https://jsfiddle.net/arow2oxa/1/

источник

2015-07-13 Zinan Nadeem

Я не понимаю ваш вопрос. Содержимое скрыто только при нажатии на заголовок – AmmarCSE

Вы хотите, чтобы этот тег p отображался или также скрывался? – brroshan

извините за путаницу, но решение было дано ниже ... если вы не поняли, посмотрите, пожалуйста, это демо решение ... надеюсь, вы поймете @AmmarCSE –

Понадобится:

$(this).closest('.panel').find('> p.summery').toggle();

Вместо:

$('.panel > p.summery').toggle();

DEMO

Необходимо выбрать только элемент, соответствующий каждой панели ,

источник

2015-07-13 19:40:47 lmgonzalves

спасибо .. его работа –

jQuery collapse скрыть другие элементы

ответ

Смежные вопросы