CODEWITHSUNDEEP
javascriptjqueryjquery-ui-accordion
Only Bolivian Here
Only Bolivian Here

Reputation: 36743

Using the jQueryUI accordion and firing an event when it changes to act within the new "pane"

JSFiddle link:

http://jsfiddle.net/dqkZN/32/

Here is the relevant code:

<div class="categories">     
    <h3>
        <img src="http://i.imgur.com/t5UXT.gif" />
        <a href="#">CCTV</a>
        <sub>Circuito Cerrado</sub>
    </h3>     
    <div>
        <ul>
            <li><a href="#">Control de Asistencia</a></li>
            <li><a href="#">Controladores de Accesso</a></li>
            <li><a href="#">Controladores de Asistencia</a></li>
            <li><a href="#">Chapas Electricas</a></li>
            <li><a href="#">Chapas Electromagneticas</a></li>
            <li><a href="#">Tarjetas de Proximidad</a></li>
        </ul>
    </div>

    <h3>
        <img src="http://i.imgur.com/TThAk.gif" />
        <a href="#">ALARMAS</a>
        <sub>Magellan Sprit Spectra Digiplex/Evo</sub>
    </h3>     
    <div>
        <ul>
            <li><a href="#">Control de Asistencia</a></li>
            <li><a href="#">Controladores de Accesso</a></li>
            <li><a href="#">Controladores de Asistencia</a></li>
            <li><a href="#">Chapas Electricas</a></li>
            <li><a href="#">Chapas Electromagneticas</a></li>
            <li><a href="#">Tarjetas de Proximidad</a></li>
        </ul>
    </div>
</div>

$('.categories').accordion();

$('.categories').accordion({
   changestart: function(event, ui) {
       $('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');
   }
});

$('.categories h3 img').click(function() {
    $(this).next().click();
});

When someone clicks a category header I want to change every icon to the plus sign (meaning it's collapsed) and after that change the newly selected panes icon to a minus sign.

Here is the specific place I think I need to place the javascript code:

$('.categories').accordion({
   changestart: function(event, ui) {
       $('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');
       //SOME CODE SHOULD GO HERE TO ACT ON "THIS" NEWLY SELECTED PANE.
   }
});

Upvotes: 1

Views: 1181

Answers (2)

redmoon7777
redmoon7777

Reputation: 4526

here you go : http://jsfiddle.net/dqkZN/37/

just added : 

$('.categories').accordion({
   changestart: function(event, ui) {
        var active = ui.options.active;
        $("h3 img").attr('src', extend_icon);
        $("h3:eq(" + active + ")").find('img').attr('src', collapse_icon);
   }
});

Upvotes: 0

megakorre
megakorre

Reputation: 2223

new fiddle http://jsfiddle.net/dqkZN/39/

is this what you are looking for??

var minusImgUrl = "http://i.imgur.com/t5UXT.gif",
    plusImgUrl  = "http://i.imgur.com/TThAk.gif";

$('.categories').accordion({
 changestart: function(event, ui) {
  $('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');       
  ui.newHeader.find("img").attr("src", minusImgUrl);
  ui.oldHeader.find("img").attr("src", plusImgUrl);
 }
});

Upvotes: 3

Related Questions