afficher/masquer le texte pertinent pour une classe basée sur le clic en utilisant jquery

Question

J'ai une liste de produits affichés. Une fois que l'on clique sur le spectacle plus le texte dans la classe extras doit être affiché, le spectacle doit être caché et montrer moins besoin d'être visible. Le contraire doit se produire lorsque vous cliquez sur moins.

J'ai utilisé le code jQuery ci-dessous et cela fonctionne mais le problème est qu'il montre/cache ajouter le texte supplémentaire dans chaque bloc. Je veux qu'il montre seulement le bloc pertinent.

Javascript

$(document).ready(function() { 

    $('.extras').css("display", "none"); 

    $('.showmore').click(function() { 
     $(".extras").toggle(); 
     $('.showmore').hide(); 
     $('.less').show(); 
    }); 

    $('.less').click(function() { 
     $(".extras").toggle(); 
     $('.extras').hide(); 
     $('.showmore').show() 
    }); 

}); 

HTML

<div class="blocks"> 
    <div class="right"> 
     <ul class="options"> 
      <li class="x"><a href="#">Service 1</a></li> 
      <li class="y"><a href="#">Service 2</a></li> 
      <li class="z"><a href="#">Service 3</a></li> 
      <li class="r"><a href="#">Service 4</a></li> 
      <li class="k"><a href="#">Service 5</a></li> 
     </ul> 
     <div class="showmore"><a>+ show more</a></div> 
    </div> 
    <div class="extras"> 
     <p>test text</p> 
     <div class="less"><a>- hide</a></div> 
    </div> 
</div> 

<div class="blocks"> 
    <div class="right"> 
     <ul class="options"> 
      <li class="x"><a href="#">Service 1</a></li> 
      <li class="y"><a href="#">Service 2</a></li> 
      <li class="z"><a href="#">Service 3</a></li> 
      <li class="r"><a href="#">Service 4</a></li> 
      <li class="k"><a href="#">Service 5</a></li> 
     </ul> 
     <div class="showmore"><a>+ show more</a></div> 
    </div> 
    <div class="extras"> 
     <p>test text</p> 
     <div class="less"><a>- hide</a></div> 
    </div> 
</div> 

<div class="blocks"> 
    <div class="right"> 
     <ul class="options"> 
      <li class="x"><a href="#">Service 1</a></li> 
      <li class="y"><a href="#">Service 2</a></li> 
      <li class="z"><a href="#">Service 3</a></li> 
      <li class="r"><a href="#">Service 4</a></li> 
      <li class="k"><a href="#">Service 5</a></li> 
     </ul> 
     <div class="showmore"><a>+ show more</a></div> 
    </div> 
    <div class="extras"> 
     <p>test text</p> 
     <div class="less"><a>- hide</a></div> 
    </div> 
</div> 

Toute aide sera appréciée.

Answer 1

Assurez-vous que vous faites votre logique dans les sections pertinentes. Demo Here

Essayez:

 $(document).ready(function() { 

      $('.extras').css("display","none"); 

      $('.showmore').click(function() { 
       var parent = $(this).closest('.blocks'); 
       $(parent).find(".extras").toggle(); 
       $(parent).find('.less').show(); 
       $(this).hide(); 
      }); 

      $('.less').click(function() { 
       var parent = $(this).closest('.blocks'); 
       $(parent).find(".extras").toggle();     
       $(parent).find('.showmore').show(); 
       $(this).hide(); 
      }); 

     }); 

Answer 2

Utilisez .closest()

$(document).ready(function() { 

    $('.extras').css("display", "none"); 

    $('.showmore').click(function() { 
     var $div = $(this).closest('.blocks'); 
     $div.find(".extras").toggle(); 
     $div.find('.showmore').hide(); 
     $div.find('.less').show(); 
    }); 

    $('.less').click(function() { 
     var $div = $(this).closest('.blocks'); 
     $div.find(".extras").toggle(); 
     $div.find(".extras").hide(); 
     $div.find('.showmore').show(); 
    }); 

});​ 

Check Fiddle

Answer 3

essayez d'utiliser $(this).toggle() dans le gestionnaire d'événements.

Ou je suppose plus complètement, $ ('. Extras'). Hide(); $ (this) .show();

Answer 4

Utilisez le $(this) pour obtenir le contenu pertinent,

donc à l'intérieur du $(".showmore").click(),

$(this).parents(".blocks").children(".extras").toggle(); 
$(this).parents(".blocks").children('.showmore').hide(); 
$(this).parents(".blocks").children('.less').show(); 

Test Link

Answer 5

Vous pouvez combiner pour travailler closest, find et toggle.
Donc tout votre javascript peut être changé pour ce qui suit.

$('.showmore, .less').click(function() { 
    var $elements = $(this).closest('.blocks').find('.extras, .showmore'); 
    $elements.toggle(); 
}); 

demo

Références

• Closest
• Find
• Toggle