3

$(".nextstep").click(function() {
  $('.step_1').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="step_1">
  Туту первый текст первого div
</div>

<div class="step_1" style="display:none;">
  Туту второй текст второго div
</div>

<div class="step_1" style="display:none;">
  Туту текс №3 3-тьего div
</div>


<div class="step_1" style="display:none;">
  Туту 4 текст 4 div
</div>

<div class="step_1" style="display:none;">
  Туту 5 текст 5 div
</div>

<button class="nextstep">Следующий шаг</button>

Как при каждом клике на кнопку "Следующий шаг" открывать следующий div с текстом?
У меня при клике открываются все блоки сразу.

1
  • Еще было бы круто,что бы когда все div уже открыты или кончились чтобы кнопка пряталась, как такое сделать? 9 авг 2016 в 12:58

5 ответов 5

2

var activeStep = 1;
$(".nextstep").click(function() {
  $('.step_1').eq(activeStep++).show();
  if(activeStep == $('.step_1').length) $(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="step_1">
  Туту первый текст первого div
</div>

<div class="step_1" style="display:none;">
  Туту второй текст второго div
</div>

<div class="step_1" style="display:none;">
  Туту текс №3 3-тьего div
</div>


<div class="step_1" style="display:none;">
  Туту 4 текст 4 div
</div>

<div class="step_1" style="display:none;">
  Туту 5 текст 5 div
</div>

<button class="nextstep">Следующий шаг</button>

7
  • а есть вариант чтобы когда закончились div спрятать кнопку? 9 авг 2016 в 12:46
  • @Анатолий добавил
    – Mihanik71
    9 авг 2016 в 13:01
  • еще раз спасибо за Вашу помощь. 9 авг 2016 в 13:07
  • опять я, можно ли текст на кнопке менять, например в диве будет скрытый span и в нем текст, брать текст с этого спана и вставлять в кнопку. '<div class="step_1" style="display:none;"> <span style="display:none;">Текст кнопки</span> Туту 5 текст 5 div </div>' 9 авг 2016 в 13:26
  • @Анатолий вы напоминаете заказчика на фрилансе, дополняя вопрос новыми мелочами. можно сделать всё, но лучше стараться самостоятельно. и глобальные вещи лучше оформлять различными вопросами, чтобы тело вопроса и заголовок соответствовали конечному содержанию
    – lexxl
    9 авг 2016 в 13:34
0

https://jsfiddle.net/9rnz5hs8/2/

    
    function makeCounter() {
      var currentCount = 2;
      return function() { 
        return currentCount++;
      };
    }
    
    $(function() {
    	cnt = makeCounter();
      $("[class^=step_]").click(function() {
      var sel = '.step_' + cnt();
        alert(sel);
        $(sel).show();
      });
    
    });
<!-- https://jsfiddle.net/9rnz5hs8/2/ -->

    <div class="step_1">
      Туту первый текст первого div
    </div>
    
    <div class="step_2" style="display:none;">
      Туту второй текст второго div
    </div>
    
    <div class="step_3" style="display:none;">
      Туту текс №3 3-тьего div
    </div>
    
    
    <div class="step_4" style="display:none;">
      Туту 4 текст 4 div
    </div>
    
    <div class="step_5" style="display:none;">
      Туту 5 текст 5 div
    </div>

0
0

https://jsfiddle.net/moonvvell/hrxgypd3/

$(".nextstep").click(function() {
    var currentOpen =$('.step_1:visible');
    $('.step_1').hide();
    $(currentOpen).next('.step_1').show();
});

Или вот вариант

0

$(".nextstep").click(function() {
  $('.warp').find(".step_1.noActive").first().show();
  $('.warp').find(".step_1.noActive").first().removeClass("noActive");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div class="warp">
  <div class="step_1">
    Туту первый текст первого div
  </div>

  <div class="step_1 noActive" style="display:none;">
    Туту второй текст второго div
  </div>

  <div class="step_1 noActive" style="display:none;">
    Туту текс №3 3-тьего div
  </div>


  <div class="step_1 noActive" style="display:none;">
    Туту 4 текст 4 div
  </div>

  <div class="step_1 noActive" style="display:none;">
    Туту 5 текст 5 div
  </div>
</div>
<button class="nextstep">Следующий шаг</button>

0

Короткий вариант без ввода лишних переменных:

$('.nextstep').click(function() {
  // показать первый скрытый по порядку
  $('.step_1:hidden').eq(0).show();
  // скрыть кнопку при отсутствии скрытых элементов
  $('.step_1:hidden').length<1 ? $('button.nextstep').hide() : false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="step_1">
  Туту первый текст первого div
</div>

<div class="step_1" style="display:none;">
  Туту второй текст второго div
</div>

<div class="step_1" style="display:none;">
  Туту текс №3 3-тьего div
</div>

<div class="step_1" style="display:none;">
  Туту 4 текст 4 div
</div>

<div class="step_1" style="display:none;">
  Туту 5 текст 5 div
</div>

<button class="nextstep">Следующий шаг</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.