Ajouter une fonction de clic à une fonction bascule?

Question

J'ai une configuration Accordian NAV avec des onglets pliables et des boutons +/- à bascule. J'essaie de rendre cliquables les DIVs de mon 'onglet'. J'ai ajouté la fonction suivante autour d'une partie de mon code et supprimé les fonctions bascule() repeditive, mais il est toujours pas tout à fait travailler droite-

MISE À JOUR

$('.tabs').click(function() { 
    } 
) 

Mon HTML

<div id="tab1" class="tabs">NEWS [<a href="#" class="button" id="plus1">more</a>]</div> 
<div class="expandable" id="one"> 
<p>This is placeholder text.</p></div> 

<div id="tab2" class="tabs">EVENTS [<a href="#" class="button" id="plus2">more</a>]</div> 
<div class="expandable" id="two"> 
<p>This is placeholder text.</p></div> 

Et mon javascript

$(window).load(function(){ 
$(document).ready(function(){ 

$(".expandable").hide(); 
$(".button").show(); 

$('.tabs').click(function() { // added new 

    $('.button').toggle(function(){ 
     $(".expandable").slideDown(
     function(){ 
      $(".button").text("less") 
     } 
    ); 
    },function(){ 
     $(".expandable").slideUp(
     function(){ 
      $(".button").text("more") 
     } 
    ); 
    }); 

}); // end of click 
}); 

}); 

Je l'avais configuration rigoureuse avec une fonction toggle() pour chaque onglet, mais on m'a dit de ne pas le faire. Je me bats avec la syntaxe JS donc je ne sais pas où aller à ce stade.

Merci à tous.

Answer 1

Dans votre cas, ne pas créer de multiples togglefunction $('#plus1').toggle$('#plus2').toggle assignent plutôt classe pour eux et créer un $('.plus').toggle cela va réduire et rendre votre code efficace (maintenable)
Pour plus d'informations sur la façon d'aller avec elle Référez slide toggle example
Il donne un bon exemple sur la façon de gérer cette fonction Toggle. vous aurez une idée sur la façon de l'utiliser. Poursuivre, si avoir aucun problème alors faire après :)

MISE À JOUR
affecter une classe à votre DIV qui doit être fait cliquable (par exemple tabs)
Dans votre JS écrire ce code

$(document).ready(function() { 
    $('.tabs').click(function() { 
     alert('the div is clicked'); 
     alert($(this).html()); // This is nothing but the content of clicked DIV 
    }); 
}); 

éDITÉE

$(document).ready(function() { 
    $('.expandable').hide(); 
}); 

Ou donner un style fiche

<style type="text/css"> 
.expandable { 
    display: none; 
} 
</style>