$(document).ready(function() { $("#showHideText").click(function() { if ($("#hide-text").is(":hidden")) { $("#hide-text").show("slow"); } else { $("#hide-text").hide("slow"); } return false; }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="catalog-item"> <img src="img/04.jpg" alt="" width="306" height="206"> <h3>Lorem ipsum</h3> <b class="catalog-item-price">300 р.</b> <div class="catalog-item-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="hidden-text" id="hide-text">Aliquam dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum.</span></p> </div> <a href="#" id="showHideText" class="btn btn-info">Описание</a> <a href="#" class="btn btn-buy">Купить</a> </div> <div class="catalog-item"> <img src="img/05.jpg" alt="" width="306" height="206"> <h3>Lorem ipsum</h3> <b class="catalog-item-price">400 р.</b> <div class="catalog-item-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="hidden-text" id="hide-text">Aliquam dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum.</span></p> </div> <a href="#" class="btn btn-info">Описание</a> <a href="#" class="btn btn-buy">Купить</a> </div> <div class="catalog-item"> <img src="img/06.jpg" alt="" width="306" height="206"> <h3>Lorem ipsum</h3> <b class="catalog-item-price">500 р.</b> <div class="catalog-item-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="hidden-text" id="hide-text">Aliquam dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum.</span></p> </div> <a href="#" class="btn btn-info">Описание</a> <a href="#" class="btn btn-buy">Купить</a> </div>

Is there a way to have one script for all buttons? Or do I have to copy jquery and change the ID every time?

  • Of course you can, tied to the class instead of id. - Baryonyx
  • I still do not really understand, can I give an example? - Artem Khreshikov

3 answers 3

 $(document).ready(function() { $(".btn.btn-info").click(function() { if ($(this).prev().find(".hidden-text").is(":hidden")) { $(this).prev().find(".hidden-text").show("slow"); } else { $(this).prev().find(".hidden-text").hide("slow"); } return false; }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="catalog-item"> <img src="img/04.jpg" alt="" width="306" height="206"> <h3>Lorem ipsum</h3> <b class="catalog-item-price">300 р.</b> <div class="catalog-item-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="hidden-text" id="hide-text">Aliquam dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum.</span></p> </div> <a href="#" id="showHideText" class="btn btn-info">Описание</a> <a href="#" class="btn btn-buy">Купить</a> </div> <div class="catalog-item"> <img src="img/05.jpg" alt="" width="306" height="206"> <h3>Lorem ipsum</h3> <b class="catalog-item-price">400 р.</b> <div class="catalog-item-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="hidden-text" id="hide-text">Aliquam dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum.</span></p> </div> <a href="#" class="btn btn-info">Описание</a> <a href="#" class="btn btn-buy">Купить</a> </div> <div class="catalog-item"> <img src="img/06.jpg" alt="" width="306" height="206"> <h3>Lorem ipsum</h3> <b class="catalog-item-price">500 р.</b> <div class="catalog-item-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="hidden-text" id="hide-text">Aliquam dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum.</span></p> </div> <a href="#" class="btn btn-info">Описание</a> <a href="#" class="btn btn-buy">Купить</a> </div>

  • if ($(".hidden-text").is(":hidden")) { -? - Igor
  • I agree a strange condition, but did not begin to redo the example - Dmitry
  • it is wrong, because it checks the visibility of only the first element in the sample - Igor
  • does not close back - Artem Khreschikov
  • @ ArtemHrechikov in the sandbox there is no such problem, does not close on the site? - Dmitriy
 $(".catalog-item .btn.btn-info").click(function (e) { e.preventDefault(); $(this).closest(".catalog-item").find(".hidden-text").toggle("slow"); });
  • works, but throws up - Artem Khreshchikov
  • @ ArtemHreyschikov Sorry, of course. - Igor

And yes, you do not need to use 100-500 blocks on the page with the same id, that is, classes.

 $(".catalog-item .btn.btn-info").click(function (e) { $(this).closest(".catalog-item").find(".hidden-text").toggle("slow"); return false; });

e.preventDefault () does not always work.

  • "e.preventDefault () does not always work out" - please give an example - Igor
  • It happens that e.preventDefault () is not called the first action, he himself saw such examples. And in the end, because of the asynchron, he managed to work out the link following. - Quazimorda
  • "cause not the first action" - it does not matter. "I saw it myself" - you misinterpret what you saw. "because of the asynchron, I had time to work it out" - it does not go into any gate. Please do not contribute to the "cult of cargo planes" in programming. - Igor
  • Okay, no more. However, here is a link to that. what i was talking about ru.stackoverflow.com/a/595991/293639 - Quazimorda
  • Wow, that's my answer! If you look closely at what is going on there, you will see that the question’s author’s mistake was in the preventDefault call inside the asynchronous callback. Use return false; in the same place it would be just as wrong. - Igor