jQuery Accordion ui-Показать / Скрыть другой div, когда панель активна

Я использую аккордеон jQuery ui.
У меня есть цитата в div, которую я хотел бы отобразить с каждой панелью аккордеона, когда они активны. Я не могу заставить его работать. Есть идеи? Я пробовал что-то вроде этого…

if ($("#section1").hasClass("ui-accordion-content-active")) {
$("#quote1").show();}

<div id="quote1"><em>quote1</em></p></div>
<div id="accordion">
 <h3>Section 1</h3>
  <div id="section1" class="sec1">
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscitait eget.
    </p>

Я подошел немного ближе, но мне все еще нужна помощь. Я изменил html на следующий:

<div class="subcontent" id="123"><em>quote1</em></p></div>
<div class="subcontent" id="124"><em>quote2</em></p></div>


<div id="accordion">
<h3>Section 1</h3>

 <div data-id="123" class="topic">
 <p>
 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. 
 ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum 
 amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra 
 </p>
 </div>
 <h3 id="section2">Section 2</h3>
 <div data-id="124" class="topic">
 <p>
 Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit 
 purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis 
</p>
</div></div>

Вот jQuery:

 $( function() {

$( "#accordion" ).accordion({
    active: false,
    collapsible: true, });

$("div").click(function(){
        if($(".topic").hasClass("ui-accordion-content-active") ==  
true) {
     // hide open subcontents
    $('.subcontent:visible').hide();
      $('.mainquote:visible').hide();
    // fade in new selected subcontent
     $('.subcontent[id='+$(this).attr('data-    
id')+']').delay(500).fadeIn();    
         } else {
              $('.subcontent:visible').hide(); } 



});});

Без функции «click» это не работает. В любом случае, чтобы котировка появилась без функции «click»?

1 ответ

  1. Вот что вы можете сделать, я не знаю, если это очень чисто

    формат html

     $( function() {
    
    $( "#accordion" ).accordion({
        active: false,
        collapsible: true, });
    
    $("h3").click(function(){
            if($(".topic").hasClass("ui-accordion-content-active") == true) {
             $('.subcontent:visible').hide();
          $('.mainquote:visible').hide();
        console.log($(this).data("id"));  
        $('.subcontent[id='+$(this).data("id")+']').delay(500).fadeIn(); 
     } else {
                  $('.subcontent:visible').hide(); }
    
    })
    ;});
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    
    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <div class="subcontent" id="123"><em>quote1</em></div>
    <div class="subcontent" id="124"><em>quote2</em></div>
    
    
    <div id="accordion">
    <h3 data-id="123">Section 1</h3>
    
     <div   class="topic">
     <p>
     Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. 
     ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum 
     amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra 
     </p>
     </div>
     <h3 data-id="124"id="section2">Section 2</h3>
     <div  class="topic">
     <p>
     Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit 
     purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis 
    </p>
    </div></div>