Hello. There is a page with two blocks. I want to implement the type "read more." HTML

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>Practice Site</title> <script src="jquery-3.1.0.min.js"></script> <script src="custom_jquery.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <html> <body> <div class="block"> <h1>First Block</h1> <p>Text of first block <a class="show">Show</a></p> <p class="hide-content">Hide content first block <a class="hide">hide</a></p> </div> <div class="block"> <h1>Second Block</h1> <p>Text of second block <a class="show">Show</a></p> <p class="hide-content">Hide content second block <a class="hide">hide</a></p> </div> </body> </html>

CSS:

 .hide-content { display: none; }

Jquery:

 $(function() { $('.show').on('click', function() { $(this).hide(); $('.hide-content').show(500); }); $('.hide').on('click', function() $('.hide-content').hide(500); $('.show').show(); }); });

At the moment, when you click on "Show" both blocks are revealed. The task is to open the .hide-content of the block in which you clicked show. Thank you in advance)

  • Forcibly hide everything and show specific through (this).find('.hide-content') - Alexey Shimansky

1 answer 1

You can use the function .closest

 $(function() { $('.show').on('click', function() { $(this).hide(); $(this).closest('.block').find('.hide-content').show(500); }); $('.hide').on('click', function() { $(this).closest('.hide-content').hide(500); $(this).closest('.block').find('.show').show(); }); });
  • Super! Thank! - Valery Sivolapenko