Prevent slide toggle from closing when a user selects a check box

JavaScript
1

Hello,

I have a div tag consisting of check boxes. the div surrounding the content is controlled by a function that opens and closes the div tag using slide toggle.
Problem area is inside the div tag, every time i click one of the check box the div tag closes.
how do i prevent the div tag from closing when i click a check box?




<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>

  #toggle-view {
    list-style:none;
    font-family:arial;
    font-size:12px;
    margin:0;
    padding:0;
    width:800px;
}

    #toggle-view li {
        margin:10px;
        border-bottom:2px solid #ccc;
        position:relative;
        cursor:pointer;
    }

    #toggle-view h3 {
        margin:0;
        font-size:18px;
    }

    #toggle-view span {
        position:absolute;
        right:5px; top:0;
        color:#1e1e1e;
        font-size:20px;
    }

    #toggle-view .panel {
        margin:5px 0;
        display:none;
    }
</style>


[B]<script>
$(document).ready(function () {

    $('#toggle-view li').click(function () {
        var text = $(this).children('div.panel');
        if (text.is(':hidden')) {
            text.slideDown('200');
            $(this).children('span').html('-');
        } else {
            text.slideUp('200');
            $(this).children('span').html('+');
        }
    });

});
</script>[/B]

<ul id="toggle-view">
    <li>
        <h3>Click here to add Project Category</h3>
        <span>+</span>
        <div class="panel">
		
		
            <p> Instructions or description of selection..
			<table border="1" bordercolor="#FFFF66" style="background-color:#FFFFCC"  cellpadding="0" cellspacing="0" >
				<tr>
					<td><input type="checkbox" name="vehicle" value="Bike">Category 1</td>
					<td><input type="checkbox" name="vehicle" value="Bike">Category 2</td>
					<td><input type="checkbox" name="vehicle" value="Bike">Category 3</td>
					<td><input type="checkbox" name="vehicle" value="Bike">Category 4</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="vehicle" value="Bike">Category 1</td>
					<td><input type="checkbox" name="vehicle" value="Bike">Category 2</td>
					<td><input type="checkbox" name="vehicle" value="Bike">Category 3</td>
					<td><input type="checkbox" name="vehicle" value="Bike">Category 4</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="vehicle" value="Bike">Category 1</td>
					<td><input type="checkbox" name="vehicle" value="Bike">Category 2</td>
					<td><input type="checkbox" name="vehicle" value="Bike">Category 3</td>
					<td><input type="checkbox" name="vehicle" value="Bike">Category 4</td>
				</tr>
			</table>	
			</p>			
			
        </div>
    </li>
</ul>
<br/><br/>
</body>
</html>
2

Hi,

I know you posted this a while back, but in case you didn’t find a solution yet, you could just apply the click handler to the <h3> tag, instead of to the complete <li> element.

E.g.

$('h3').click(function () {
  var text = $(this).nextAll("div.panel");
  if (text.is(':hidden')) {
    text.slideDown('200');
    $(this).children('span').html('-');     
  } else {
    text.slideUp('200');
    $(this).children('span').html('+');     
  }
});

BTW, thanks for making such a good, easy to use example to demonstrate your issue. I wish more people did this.