CODEWITHSUNDEEP
jquery-uiaccordionjqueryjquery-ui-accordion
nikos
nikos

Reputation: 21

How to catch JQuery UI Accordion Click Event?

I'm using jquery UI's Accordion. When a user switches tabs, I need to hide some images. I've tried a couple of different methods (http://api.jqueryui.com/accordion/#event-beforeActivate), but it won't work:

HTML:

<div id="accordion">
 <h3>
  <a href="#">
    <span class="menu-item">About</span>
    <img id="slide1" src="/images/sliding-image_1.png"/>
  </a>
 </h3>
 <div>
  .................
 </div>

 <h3><a href="#">................

JS:

 <script>
 $( "#accordion" ).accordion({ beforeActivate: function( event, ui ) 
                                    {
                                    ui.newHeader.click(function () {
                                        $('#slider1').remove();
                                                      }  
                                    }

               });
</script>

OR another one:

<script>
$("#accordion").accordion({
  beforeActivate: function(event, ui) {
   if(ui.newHeader) {
    $('h3 a img').remove();
                    }
                                      }
                          });
</script>

Upvotes: 1

Views: 17498

Answers (3)

Sazaj
Sazaj

Reputation: 25

You are looking for

h3.ui-accordion-header.ui-state-active

If it would be backbone, the code would look something like this:

events: {
   'click h3.ui-accordion-header.ui-state-active': 'someFunction'
}

Upvotes: 1

nikos
nikos

Reputation: 21

The problem was not in the script. The problem was its location. All of these scripts work fine.

I wrote this:

<script>
  $(document).ready(function(){
   ----------------------------
   Create Accordion
   ----------------------------
  });
</script>

And below:

<script>
  $(document).ready(function(){
   ----------------------------
    beforeActivate event
   ----------------------------
  });
</script>

For some reason, the second script is loaded before the first and did not see the created accordion. So the working script is:

<script>
  $(document).ready(function(){
   ----------------------------
   Create Accordion
   ----------------------------
   ----------------------------
   beforeActivate event
   ----------------------------
  });
</script>

OR:

<script type="text/javascript">
$(document).ready(function(){
var icons = {
    header: "ui-icon-carat-2-n-s",
    headerSelected: ""
};
$("#accordion").accordion({ active:false },{collapsible:true},{icons:icons},{autoHeight:false});

  $("#accordion").accordion(
   {
    beforeActivate: function(event, ui) 
    { 
     $('h3 a img').stop(true); 
     $('h3 a img').fadeOut("medium"); 
    }
   });

});
</script>

Upvotes: 0

msapkal
msapkal

Reputation: 8346

Is this what you are looking for...

$( "#accordion" ).accordion({
    beforeActivate: function( event, ui ) {
        if(ui.newHeader) {
            $(ui.newHeader).find('img').hide();
            $(ui.oldHeader).find('img').show();
        }
    }
});

FIDDLE

Upvotes: 1

Related Questions