Good evening, tell me, you need to implement such a task, there are radio buttons. When you select a specific radiobuttona, a block appears with other radio buttons, and in this block, if you select another specific radio button, another block appears with the same radio buttons. There is a script that, according to the author, should perform such a task, help set up this script and write a structure for it.

$('input.ShowOrHide').click(function() { var checked = $("input.ShowOrHide:checked"); if (checked.length == 0) { var currentDiv = this.attr("class"); /* Ρ‚ΡƒΡ‚ Π²Ρ€ΠΎΠ΄Π΅ ΠΊΠ°ΠΊ Ρ€Π°ΡΠΏΠ°Ρ€ΡΠΈΡ‚ΡŒ классы Π½ΡƒΠΆΠ½ΠΎ ΠΈ Π½Π°ΠΉΡ‚ΠΈ ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰ΠΈΠΉ Π·Π° ΡΠ²ΡΠ·ΡƒΡŽΡ‰ΠΈΠΉ с Π΄ΠΈΠ²ΠΎΠΌ. ВсС классы для js ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎΠ²Π°Ρ‚ΡŒ "имя_js"*/ var getCurrentClass = имя_js_1 /*Ρ€Π°ΡΠΏΠ°Ρ€ΡΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ класс ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π½Π° Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π΄ΠΈΠ²(имя_js ΠΈ Π΄ΠΈΠ² 1)*/ var findDiv = "div.+currentDiv"; $(findDiv).show(); } else { $("div.ShowOrHide").hide(); $('div#' + $(this).val()).show(); } });

    2 answers 2

     * { padding: 0; margin: 0; box-sizing: border-box; } .b { max-width: 500px; margin: 1em auto; border: 1px solid #ccc; } .b__input { display: none; } .b__label { display: block; background: #ccc; padding: 1em; cursor: pointer; } .b__label~.b__label { border-top: 1px solid #fff; } .b__input:checked+.b__label { background: green; color: #fff; cursor: default; } .b__content { max-height: 0; visibility: hidden; padding-left: 1em; padding-right: 1em; transition: max-height .3s; } .b__input:checked+.b__label+.b__content { max-height: 500px; visibility: visible; transition-delay: 0; padding-top: 1em; padding-bottom: 1em; } 
     <div class="b"> <input type="radio" class="b__input" name="nameRadio" id="r1"> <label for="r1" class="b__label">title 1</label> <div class="b__content">content 1</div> <input type="radio" class="b__input" name="nameRadio" id="r2"> <label for="r2" class="b__label">title 2</label> <div class="b__content">content 2</div> <input type="radio" class="b__input" name="nameRadio" id="r3"> <label for="r3" class="b__label">title 3</label> <div class="b__content">content 3</div> </div>

    • Accordion itself is not needed - Kirill Taran

    I do not know how this js code works. But here is an example with pure css that does what you want. You just need to know selectors and pseudo-classes :checked and + .

    Well, for styling you can do it yourself)))

    If something does not work out then write a question with your insufficiently good code, we will help.

     input{ float: left; } div{ display: inline-block; //width: auto; height: 15px; max-width: 0; overflow: hidden; } input:checked + div{ max-width: 200px; -webkit-transition: all 1s; transition: all 1s; } 
     <input type="radio" name="radioFirst" /> <input type="radio" name="radioFirst" /> <input type="radio" name="radioFirst" /> <div class="sub_1_radio"> <input type="radio" name="radioSub1" /> <input type="radio" name="radioSub1" /> <input type="radio" name="radioSub1" /> <div class="sub_2_radio"> <input type="radio" name="radioSub2" /> <input type="radio" name="radioSub2" /> <input type="radio" name="radioSub2" /> </div> </div>

    • It is necessary that when you select that radio button back everything was hidden back as it was. Here's how on this site muik.ru/calculator.php# The accordion has a menu item called the "Boiler Room Section", there will be two items on the radio button, one is selected when you choose another appears and so on as I described above. - Kirill Taran
    • I wonder you know so bad css ? This is just an example, and the names of the radio buttons were not set in it, I asked the names, and everything works as you wanted. - Raz Galstyan
    • there is no sense in that, it’s still a plus to everything, there will be smooth styles to write a bunch - Kirill Taran
    • @KirillTaran Everything exactly needs to be written styles, now I will make it smooth, without ΠΊΡƒΡ‡ΠΈ styles. - Raz Galstyan
    • Thank you so much - Kirill Taran