faire basculer plusieurs contenus et ajouter du texte au lien de basculement

Question

J'ai environ 25 éléments à afficher/masquer (toggle) sur une page comme ceci...

HTML :

<h2><a href="#" class="link1">Headline One</a></h2>
<div class="toggle-item-link1">content</div>

<h2><a href="#" class="link2">Headline Two</a></h2>
<div class="toggle-item-link2">content</div>

JS :

$('[class^=toggle-item]').hide();
//toggle content on click
$('[class^=link]').click(function() {
var $this = $(this);
var x = $this.attr("className");
$('.toggle-item-' + x).toggle();
$(this).text($(this).text() == 'open' ? 'close' : 'open');

---

Ce qui se passe, c'est que le texte H2 (titre un, titre deux) est entièrement remplacé par le texte "open/close" en fonction de l'état de la bascule. Ce que je veux faire, c'est ajouter Ouvrez/fermez le texte du titre actuel en fonction de l'état de la bascule.

Par exemple :

Ouvrir le titre 1 / Fermer le titre 1

Ouvrir le titre deux / Fermer le titre deux

Je ne vois pas comment faire ça ici. Toute aide serait la bienvenue. Merci.

Answer 1

Pour garder les choses simples, je mettrais le texte d'ouverture/fermeture dans un span, et je le référencerais :

Ejemplo: http://jsfiddle.net/8TXDM/1/

HTML

<h2><a href="#" class="link1"><span>Open</span> Headline One</a></h2>
<div class="toggle-item-link1">content</div>

<h2><a href="#" class="link2"><span>Open</span> Headline Two</a></h2>
<div class="toggle-item-link2">content</div>​

jQuery

$('[class^=toggle-item]').hide();

$('[class^=link]').click(function() {
    $('.toggle-item-' + this.className).toggle();
    $('span',this).text(function(i,txt) {
        return txt === "Open" ? "Close" : "Open";
    });
});​

De même, au lieu de sélectionner le .toggle-item- du DOM à chaque fois, je me contenterais probablement de le traverser.

Ejemplo: http://jsfiddle.net/8TXDM/2/

$('[class^=link]').click(function() {
    $('span', this).text(function(i, txt) {
        return txt === "Open" ? "Close" : "Open";
    }).end().parent().next().toggle();
});

Answer 2

Vous pouvez ajouter du contenu à un élément en utilisant $('#id').append() . Si vous ajoutez un à une classe, vous pouvez le supprimer par la suite avec $('.class #id').remove() .

Utilisez vos propres sélecteurs selon vos besoins :-) Vous pouvez également définir le texte d'un élément avec la fonction $('#id').text('my_text) fonction. Ou si vous devez définir son HTML $('#id').html('my_html') .

Answer 3

Essayez quelque chose comme ça : http://jsfiddle.net/ZgyAx/

Voici le code pour cela :

$('[class^=toggle-item]').hide();
//toggle content on click
$('[class^=link]').click(function() {
    var $toggleItem = $('.toggle-item-' + $(this).attr("class"));
    var $toggleLink = $(this);
    $toggleItem.slideToggle(function() {
        var $stateSpan = $('<span class="state"></span>');
        $toggleItem.is(':visible') ? $stateSpan.text('Close ') : $stateSpan.text('Open ');
        $toggleLink.children('.state').remove().end().prepend($stateSpan);
    });
}).prepend($('<span class="state">Open </span>'));

J'ai changé la bascule pour qu'elle soit slideToggle afin que le texte soit révélé/caché en douceur, plutôt que d'être ouvert et fermé par à-coups. Bien sûr, si vous préférez cela, vous pouvez simplement changer le paramètre slideToggle retour à toggle .

Pour faciliter le remplacement du texte, le texte d'ouverture/fermeture est entouré d'une balise <span> avec une classe qui lui permettra d'être rapidement saisie. Ensuite, pour garder les choses simples, il teste la visibilité de l'élément de basculement et l'utilise pour déterminer s'il faut dire Ouvrir ou Fermer. Notez que cela doit être fait à l'intérieur de la callback pour slideToggle car le test de visibilité ne sera pas précis tant que l'animation ne sera pas terminée. Enfin, il suffit de supprimer tout texte d'état d'ouverture/de fermeture existant et d'insérer le nouveau texte.

Answer 4

Si votre mise en page est telle qu'elle est dans la question, au lieu de trouver par classe, vous pouvez trouver l'élément de manière relative. Il serait également plus facile d'envelopper le texte dans un autre élément pour le modifier facilement, comme ceci :

$('h2 + div').hide();
$('h2 a').prepend('<span>Open</span> ');

$('h2 a').click(function(e) {
    var vis = $(this).parent().next().toggle().is(':visible');
    $(this).find('span').text(vis ? 'Close' : 'Open');
    e.preventDefault();
});​​

Vous pouvez l'essayer ici .