There are several groups of blocks lined up in rows. For example, two rows of three blocks.
Under each block there is some textual content that must be hidden / shown when clicking on a block.
You need a universal solution, which when you click on any block displays the text content of all blocks in this row and at the same time hides all the others (if open).
By default, all textual content is hidden.
The problem is that the number of rows is not defined.

HTML code of the series:

<div class="row"> <div class="c3 toogle"> <p class="toogle-text">НСкий тСкст</p> </div> <div class="c3 toogle"> <p class="toogle-text">НСкий тСкст</p> </div> <div class="c3 toogle"> <p class="toogle-text">НСкий тСкст</p> </div> </div>

I was thinking of adding indexes to each row, but this is a Hindu version, but right now I do not know how.

 $('.toogle').click(function() { $('.toogle-text').slideToggle(); });
  • $ ('. toogle') .click (function () {$ ('. toogle-text') .slideToggle ();}); - Dmitry Yakovlev
  • I made Pts easy, I thought of adding indexes to each row, but this is a Hindu version, but for now I don’t get praline - Dmitry Yakovlev
  • Nothing helped to say :)) - Dmitry Yakovlev
  • one
    Do you want someone to guess the structure of your HTML-code? The question must be issued with high quality. If you think that I find fault here and demand some unnecessary information, then why haven’t there been an answer yet, and the question was almost closed (3/5 votes) due to β€œIt is necessary to clarify the details of the question”? Think about it. - Regent

2 answers 2

Option without javascript

 .toogle:not(:focus)>.hideable { display:none; } 
 <div class="row"> <div class="c3 toogle" tabindex=1>статичСская Ρ‡Π°ΡΡ‚ΡŒ <p class="hideable">Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ тСкст</p> </div> <div class="c3 toogle" tabindex=1>статичСская Ρ‡Π°ΡΡ‚ΡŒ <p class="hideable">Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ тСкст</p> </div> <div class="c3 toogle" tabindex=1>статичСская Ρ‡Π°ΡΡ‚ΡŒ <p class="hideable">Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ тСкст</p> </div> </div>

Option with jquery if focus is not needed. Although the focus may be more convenient for the user to switch the visibility Tab.

 $('.toogle').click(function(){ $('.toogle').addClass('closed'); $(this).removeClass('closed'); }); 
 .closed .hideable { display:none; } div.float { float:left; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="c3 toogle closed"> <div class=float> _статичСская Ρ‡Π°ΡΡ‚ΡŒ_ <p class="hideable"> Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ тСкст </p> </div> <div class=float> _статичСская Ρ‡Π°ΡΡ‚ΡŒ_ <p class="hideable"> Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ тСкст </p> </div> <div> _статичСская Ρ‡Π°ΡΡ‚ΡŒ_ <p class="hideable"> Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ тСкст </p></div> </div> <div class="c3 toogle closed">статичСская Ρ‡Π°ΡΡ‚ΡŒ <p class="hideable">Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ тСкст</p> </div> <div class="c3 toogle closed">статичСская Ρ‡Π°ΡΡ‚ΡŒ <p class="hideable">Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ тСкст</p> </div> </div>

  • Good decision, thanks, I will continue to think I have three such blocks lined up under them three more left to do so that when you click on any block from the line all three open and so on - Dmitry Yakovlev
  • inside the "static part" you can drive as many blocks as you want - sercxjo
  • They are located like a lexxl, and the text should go as you have only on all three in the same row. That's the idea - Dmitry Yakovlev
  • it would not be bad if you re-click it to hide it - Dmitry Yakovlev
  • @ Dmitry Yakovlev changed the second example - sercxjo

 $(function(){ $('.toogle').click(function(){ $('.toogle .toogle-text').css('opacity', '0'); $(this).closest('.row').find('.toogle .toogle-text').css('opacity', '1'); }) }) 
 .toogle { display: inline-block; margin-bottom: 20px; background: silver; } .toogle-text { opacity: 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="c3 toogle"> <p class="toogle-text">НСкий тСкст</p> </div> <div class="c3 toogle"> <p class="toogle-text">НСкий тСкст</p> </div> <div class="c3 toogle"> <p class="toogle-text">НСкий тСкст</p> </div> </div> <div class="row"> <div class="c3 toogle"> <p class="toogle-text">НСкий тСкст</p> </div> <div class="c3 toogle"> <p class="toogle-text">НСкий тСкст</p> </div> <div class="c3 toogle"> <p class="toogle-text">НСкий тСкст</p> </div> </div> <div class="row"> <div class="c3 toogle"> <p class="toogle-text">НСкий тСкст</p> </div> <div class="c3 toogle"> <p class="toogle-text">НСкий тСкст</p> </div> <div class="c3 toogle"> <p class="toogle-text">НСкий тСкст</p> </div> </div>

  • Not exactly what is needed, the text crawls out from under the block in my case - Dmitry Yakovlev
  • Well, firstly, in the question of this was not specified - both formulated and answered. secondly, a question about the functionality of displaying text in everything, and not about the animation of its appearance. use css and place your text as you like. this does not affect javascript - lexxl