JQuery: start slideToggle() as hidden

Question

I created this:

    $(document).ready(function(){
        var speed = 500;

        $('.brewed').click(function(){
            $('.ifBrewed').slideToggle(speed);
        });
    });

html, body {
        background-color: black;
        color: white;
    }

    input[type=checkbox] {
    display:none;
    }

    .step_1, .step_2, .step_3 {
        padding: 2%;
        margin: 0 auto;
        font-weight: 100;
    }

    input[type=checkbox]:checked + label {
        border: 3px solid white;
    }

    .ifBrewed {
        background-color: #181818;
        padding: 2%;
        display: none;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <!-- Step 1 -->
    <div class="row">
        <h2>How do you enjoy your coffee?</h2>
        <div class="col-lg-6 col-sm-6 col-xs-6 step_1 text-center">
            <div>
                <input type="checkbox" name="site" id="so" />
                <label for="so">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Espresso</h3>
                    <p>add the description here about this coffee!</p>
                </label>
            </div>
        </div>
        <div class="col-lg-6 col-sm-6 col-xs-6 step_1 brewed text-center">
            <div>
                 <input type="checkbox" name="site" id="sf" />
                <label for="sf">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Brewed</h3>
                    <p>add the description here about this coffee!</p>
                </label>
            </div>
        </div>
    </div>

<!-- Step 1.5 -->
<div class="ifBrewed">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="ba" />
                <label for="ba">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Drip coffee</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bb" />
                <label for="bb">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Aeropress</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bc" />
                <label for="bc">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>French press</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bd" />
                <label for="bd">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Vacuum pot</h3>
                </label>
            </div>
        </div>
    </div>
    <!-- Row 2 -->
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="be" />
                <label for="be">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Syphon</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bf" />
                <label for="bf">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>V60</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bg" />
                <label for="bg">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Chemex</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bh" />
                <label for="bh">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Moka pot</h3>
                </label>
            </div>
        </div>
    </div>
    <!-- Row 3 -->
    <div class="row">
        <div class="col-lg-3 col-md-3"></div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bi" />
                <label for="bi">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Percolato</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bj" />
                <label for="bj">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Eva solo</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3"></div>
    </div>
</div>
</div>

I did like other threads said, Add the display:none feature, and I did try on both CSS and JQuery .css(). It's going well, but I need help with this little bug.

As you can see, when you click the Slide toggle input it toggles then toggles back, but I want it to stay without toggling off until I click it again.

How do I do that?

Thank you!

Answer 1

I think this has something to do with the label. When you click on the .brewed div the labels click event is also being triggered. I think this is making jquery think that 2 click events have occurred.

I have just added e.preventDefault() which prevents any default element click behavior from occurring. I did notice that even without my added code the checkboxes are not being checked on click. This is because they have display none set. Having display none on the checkboxes will also mean they will not be posted if they are part of a form submission. I am not sure if that is in issue for you.

$(document).ready(function(){
    var speed = 500;

    $('.brewed').click(function(e){
      e.preventDefault();
      $('.ifBrewed').slideToggle(speed);
    });
});

html,
body {
  background-color: black;
  color: white;
}

input[type=checkbox] {
  display: none;
}

.step_1,
.step_2,
.step_3 {
  padding: 2%;
  margin: 0 auto;
  font-weight: 100;
}

input[type=checkbox]:checked+label {
  border: 3px solid white;
}

.ifBrewed {
  background-color: #181818;
  padding: 2%;
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <!-- Step 1 -->
  <div class="row">
    <h2>How do you enjoy your coffee?</h2>
    <div class="col-lg-6 col-sm-6 col-xs-6 step_1 text-center">
      <div>
        <input type="checkbox" name="site" id="so" />
        <label for="so">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Espresso</h3>
                    <p>add the description here about this coffee!</p>
                </label>
      </div>
    </div>
    <div class="col-lg-6 col-sm-6 col-xs-6 step_1 brewed text-center">
      <div>
        <input type="checkbox" name="site" id="sf" />
        <label for="sf">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Brewed</h3>
                    <p>add the description here about this coffee!</p>
                </label>
      </div>
    </div>
  </div>

  <!-- Step 1.5 -->
  <div class="ifBrewed">
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="ba" />
          <label for="ba">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Drip coffee</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bb" />
          <label for="bb">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Aeropress</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bc" />
          <label for="bc">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>French press</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bd" />
          <label for="bd">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Vacuum pot</h3>
                </label>
        </div>
      </div>
    </div>
    <!-- Row 2 -->
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="be" />
          <label for="be">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Syphon</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bf" />
          <label for="bf">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>V60</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bg" />
          <label for="bg">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Chemex</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bh" />
          <label for="bh">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Moka pot</h3>
                </label>
        </div>
      </div>
    </div>
    <!-- Row 3 -->
    <div class="row">
      <div class="col-lg-3 col-md-3"></div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bi" />
          <label for="bi">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Percolato</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bj" />
          <label for="bj">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Eva solo</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3"></div>
    </div>
  </div>
</div>

Answer 2

The click event is triggering twice because you've assigned a click event handler on .brewed and that's in an input/label. You need to either re-think the event you want to toggle .ifBrewed or you can just assign another click handler to that label and disable the default action.

$(document).ready(function() {
  var speed = 500;
  $('label[for="sf"]').on('click',function(e) {
    e.preventDefault();
  })
  $('.brewed').on('click',function(e) {
    $(".ifBrewed").slideToggle(speed);
  })
});

html,
body {
  background-color: black;
  color: white;
}

input[type=checkbox] {
  display: none;
}

.step_1,
.step_2,
.step_3 {
  padding: 2%;
  margin: 0 auto;
  font-weight: 100;
}

input[type=checkbox]:checked+label {
  border: 3px solid white;
}

.ifBrewed {
  background-color: #181818;
  padding: 2%;
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <!-- Step 1 -->
  <div class="row">
    <h2>How do you enjoy your coffee?</h2>
    <div class="col-lg-6 col-sm-6 col-xs-6 step_1 text-center">
      <div>
        <input type="checkbox" name="site" id="so" />
        <label for="so">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Espresso</h3>
                    <p>add the description here about this coffee!</p>
                </label>
      </div>
    </div>
    <div class="col-lg-6 col-sm-6 col-xs-6 step_1 brewed text-center">
      <div>
        <input type="checkbox" name="site" id="sf" />
        <label for="sf">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Brewed</h3>
                    <p>add the description here about this coffee!</p>
                </label>
      </div>
    </div>
  </div>

  <!-- Step 1.5 -->
  <div class="ifBrewed">
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="ba" />
          <label for="ba">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Drip coffee</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bb" />
          <label for="bb">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Aeropress</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bc" />
          <label for="bc">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>French press</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bd" />
          <label for="bd">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Vacuum pot</h3>
                </label>
        </div>
      </div>
    </div>
    <!-- Row 2 -->
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="be" />
          <label for="be">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Syphon</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bf" />
          <label for="bf">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>V60</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bg" />
          <label for="bg">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Chemex</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bh" />
          <label for="bh">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Moka pot</h3>
                </label>
        </div>
      </div>
    </div>
    <!-- Row 3 -->
    <div class="row">
      <div class="col-lg-3 col-md-3"></div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bi" />
          <label for="bi">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Percolato</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bj" />
          <label for="bj">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Eva solo</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3"></div>
    </div>
  </div>
</div>