JQuery cacher/divs spectacle à partir de l'accordéon

Question

Salut j'ai un accordéon simple, mis en place avec jQuery avec la structure HTML:

<div class="accordion_headings">Title 1</div> 
<div class="accordion_child">Accordion Content 1</div> 

<div class="accordion_headings">Title 2</div> 
<div class="accordion_child">Accordion Content 2</div> 

et ce script

$('div.accordion_headings').click(function() { 
    $('div.accordion_child').slideUp('normal'); 
    $(this).next().slideDown('normal'); 
}); 

$("div.accordion_child").hide(); 

Maintenant, je veux aussi une autre div sur la page à permutée en cliquant sur l'un de ces liens d'accordéon alors j'ai ajouté plus de classes aux liens

<div class="accordion_headings link1">Title 1</div> 
<div class="accordion_child">Accordion Content 1</div> 

<div class="accordion_headings link2">Title 2</div> 
<div class="accordion_child">Accordion Content 2</div> 

et ajouté le contenu div que je voulais échanger sur

<div id="content_1" class="swap">Content 1</div> 
<div id="content_2" class="swap">Content 1</div> 

C'est le script que je suis venu avec (après renifler Stack Oveflow)

$(document).ready(function() { 

    var clickHandler = function (link) { 
     $('.swap').hide(); 
     $('#content_' + link.data.id).show(); 
     $('.selected').removeClass('selected'); 
     $(this).attr('class','selected'); 
    } 

    $('.link1').bind('click', {id:'1'} ,clickHandler); 
    $('.link2').bind('click', {id:'2'} ,clickHandler); 

}); 

fonctionne presque .. mais à cliquer sur le accordéon il supprime maintenant la classe accordéon_headings et détruit mon style ... la chose étrange est l'accordéon fonctionne toujours? Quelqu'un peut-il m'aider s'il vous plaît à nettoyer cela. Aussi comment pourrais-je animer ou utiliser le fondu? Est-ce que je remplacerais la cacher et montrerai avec fadeIn fadeOut? Merci.

Answer 1

Au lieu de:

$(this).attr('class','selected'); 

utilisation

$(this).addClass("selected"); 

Je recommande également de ne pas utiliser des sélecteurs de classe nue (par exemple » .link1") car ils sont généralement beaucoup plus lent que les sélecteurs avec une étiquette attachée. Voici un changement suggéré:

$(document).ready(function() { 
    var clickHandler = function(evt) { 
    $('div.swap').hide(); 
    $('#content_' + link.data.id).show(); 
    $('div.selected').removeClass('selected'); 
    $(this).addClass("selected"); 
    } 
    $('div.link1').bind('click', {id:'1'}, clickHandler); 
    $('div.link2').bind('click', {id:'2'}, clickHandler); 
});