Cleo Cleo - 28 days ago 6
Javascript Question

How can I make a button apply a class to the next div in the document flow?

I am trying to use jQuery to have a button that moves you through a series of steps by bolding each one in succession. I also want each step to be bolded when clicked on, and unbolded when any other step is clicked on. So, it needs to know which step is already bolded, and then bold the next one when the button is clicked. I am new to jQuery and don't know how to word this!

This is my html:

<div id="container">

<div id="step1">
1. Step 1.
</div>

<div id="step2">
2. Step 2.
</div>

<div id="step3">
3. Step 3.
</div>

<div id="step4">
4. Step 4.
</div>

<div id="step5">
5. Step 5.
</div>

<button>
NEXT STEP
</button>


and this is my css:

#container {
height: 90%;
width: 60%;
border: 1px solid black;
border-radius: 3px;
margin: 5% 20%;
padding: 10px;
line-height: 1.5em;
}

button {
float: right;
position: relative;
margin-top: -8px;
background-color: black;
border: none;
border-radius: 3px;
color: white;
font-size: 1em;
padding: 8px;
}

div {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}

.bold {
font-weight: 700;
}


And this is the jQuery I've tried to start (just for clicking steps to bold them):

$(function() {

$("#step1").click(function (){
$("#step1").addClass("bold")
})

$("#step2").click(function (){
$("#step2").addClass("bold")
})

$("#step3").click(function (){
$("#step3").addClass("bold")
})

$("#step4").click(function (){
$("#step4").addClass("bold")
})

$("#step5").click(function (){
$("#step5").addClass("bold")
})

})


It also seems pretty repetitive to have a separate function for each step. Is there a way to combine them all? I tried but then clicking one step bolded all the steps.

Answer

Adding a class of step to each step element, I think this should meet your requirements:

    $('.step').click(function(){
      $('.bold')
        .removeClass('bold');
      $(this)
        .addClass('bold');
    });

    $('button').click(function(){
      if( $('.bold').length < 1 ){
        $('.step')
          .first()
            .addClass('bold');
      }
      else {
        $('.bold')
          .removeClass('bold')
            .next('.step')
              .addClass('bold');
        if($('.bold').length < 1){
           $('.step')
             .first()
               .addClass('bold');
        }
      }
    });
#container {
  height: 90%;
  width: 60%;
  border: 1px solid black;
  border-radius: 3px;
  margin: 5% 20%;
  padding: 10px;
  line-height: 1.5em;
}

button {
  float: right;
  position: relative;
  margin-top: -8px;
  background-color: black;
  border: none;
  border-radius: 3px;
  color: white;
  font-size: 1em;
  padding: 8px;
}

div {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

.bold {
  font-weight: 700;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div id="step1" class="step">1</div>
  <div id="step2" class="step">2</div>
  <div id="step3" class="step">3</div>
  <div id="step4" class="step">4</div>
  <div id="step5" class="step">5</div>
  <div id="step6" class="step">6</div>
  <div id="step7" class="step">7</div>
  <div id="step8" class="step">8</div>
  <button>Next Step</button>
</div>

JSBIN

Comments