Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

nicholas maddren
nicholas maddren
12,793 Points
Posted by nicholas maddren
nicholas maddren
12,793 Points

jQuery checkbox bug

Hey guys I'm not sure if it is jQuery that can solve this however if you look here: http://jsfiddle.net/DTcHh/861/

If you open the "Price" toggle you will notice there is a checkbox and if you press it the box closes. I don't want that box to close when the checkbox is ticked how can I stop this? Thanks :)

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi nicholas,

I forked your fiddle: http://jsfiddle.net/7r4pzbzg/ Those are the changes I would make.

html -

Added matching id and for attributes to the input and label elements to increase accessibility. Now you can click on the label to select/deselect the checkbox. I guessed that it would be "price" but switch to whatever is appropriate.

javascript -

Attached click handler instead to .h3-finder-toggle

This way the h3 can open and close the panel div and any clicks within the panel div do not interfere with opening and closing the panel.

Also, switched to $(this).next() to correctly select the panel div in relation to the h3

css -

Moved cursor: pointer styling from .li-toggle to .h3-finder-toggle This occurred around lines 90 to 98

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

Thanks awesome help, I'm so glad you have explained it :)

miguelcastro2
PLUS
miguelcastro2
Courses Plus Student 6,573 Points
miguelcastro2
miguelcastro2
Courses Plus Student 6,573 Points

The problem is that your click event <li> is wrapping the checkbox and since the event is tied to the <li>then anything within the <li> that is clicked will trigger the slide.

A solution is to add an ID selector to the actual icon and attach the click event to the icon itself. Then toggle the visibility of the div panel you are trying to show.

<div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-4">
       <form class="car-finder-container dflt-container">
         <h2 class="h2-finder">Car finder</h2>
         <ul class="toggle-view">
           <li class="li-toggle">
        <h3 class="h3-finder-toggle">Price<span id="toggle-btn" class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h3>
        <div class="panel">
            <input type="checkbox"/>
            <label>Styled Check Box</label>
        </div>
    </li>
    </ul>
         <button href="#" class="btn btn-block car-search-button btn-lg btn-success">Search cars <span class="glyphicon car-search-g glyphicon-search"></span>
         </button>
         <h4 class="h4-finder"><a href="#">Try our Smart Search </a><span class="glyphicon info-car-search-g glyphicon-info-sign"></span></h4>
       </form>
      </div>
      </div>
      </div>

$(document).ready(function () {

    $('#toggle-btn').click(function () {
        $('div.panel').slideToggle();       
    });

});

I recommend using ID selectors for unique elements within your HTML and use classes for re-usable components. An ID selector might be more beneficial for the .panel element.

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

If I am wanting to have 5 or so <li>'s the same as the one I already have I'd need to create 5 different ID's wouldn't I? I'm a little confused at the minute, I've tried what you have said with no luck, could you possible show me the example in fiddle?