jQuery: открыть следующий DIV на основе текущего элемента div

Question

У меня есть структура HTML, как показано ниже.

<dl id="steps">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div>
<h2>Some Title</h2>
<div class="options">
<div class="some-inputs"></div>
<div class="next"><input type="button class="btn" /></div>
</div>
<div class="options">
<div class="some-inputs"></div>
<div class="next"><input type="button class="btn" /></div>
</div>
</div>
</div>
</dl>

Я хочу, как, когда документ готов выше структура скрыта.Чем после щелчка по элементу (который доступен в документе) выше структура будет отображаться, но только первый div, который имеет класс options.

Примечание: Div с классом some-options содержит различные формы ввода, такие как текст, радио, флажок и т. Д.

Итак, как я могу выполнить щелчок по кнопке класса btnактивировать родительский div с классом options и после нажатия на кнопку «Далее» на текущем активированном div следующий div с классом options активируется.Это будет продолжаться и так далее. До тех пор, пока есть опции div.

То, что я устал.

$("#procced").click(function(){ 
    $("#steps").show();

    var i = 0;

});

Новичку с jQuery нужно руководство, чтобы сделать это возможным.

#procced is other element somewhere is DOM. I want to perform like when #procced is clicked question's HTML will show up. THat i did some how. Next is not whole structure will show but only first div with .options and its next button (obviously). Than click on .btn next .options will show up. previous will remain show

Answer 1

$("#procced").click(function(){    
     if($('#steps').is(":visible") == true)
        {
            $('#steps options').each(function(element){
               if($(element).is(":visible") == false)
               {
                  $(element).show();
                  break;
               }
           })
        }
});

Answer 2

$( document ).ready(function() {
  $( ".options" ).hide().first().show();
  
  $(".next").click(function(){ $(this).parents('.options').next().show();});
  
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dl id="steps">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div>
<h2>Some Title</h2>
<div class="options">options1
<div class="some-inputs"></div>
<div class="next"><input type="button" class="btn" /></div>
</div>
<div class="options">options1
<div class="some-inputs"></div>
<div class="next"><input type="button" class="btn" /></div>

</div>
<div class="options">options1
<div class="some-inputs"></div>
<div class="next"><input type="button" class="btn" /></div>

</div>
</div>
</div>
</dl>

Здравствуйте. Вы можете сделать это

для показа первого времени

$( document ).ready(function() {
$("#procced").click(function(){ 
  $( ".options" ).first().show();});});

и нажатия кнопки для активной родительской опцииdiv вы можете сделать так

$(".btn").click(function(){ $(this).parents('.options').first().addClass("active") });

и для следующего шоу вы можете сделать что-то вроде этого

$(".next").click(function(){ 
   $(this).parents('.options').next().show();

пожалуйста, поставьте «next» и «btn»событие click в document.ready скобка

Answer 3

Вы можете сделать что-то вроде этого:

    $( document ).ready(function() {
      //Assuming you need to perform on "procced" id click
        $("#procced").click(function(){ 
          $( ".options" ).each(function() {
           if(!$( this ).is(':visible')) {
             $( this ).show()
             break; //break the loop
           }
         });
     });
});