Stopping Propagation

by ChrisStanyon

HTML

<form action="someScript.php" method="post" id="form1">
<div class="menu">
	<a class="hover-link">BASKET</a>
	<div class="sub">
		<p>The buttons</p>
        <input type="image" name="plus" src="http://lorempixel.com/20/20/sports/1" style="width:20px;" />
        <input type="image" name="minus" src="http://lorempixel.com/20/20/sports/2" style="width:20px;" />
	</div> 
</div>
</form>

CSS

.menu { width: 400px; border: 1px solid green; margin: 20px;  }
.sub { border: 1px solid red; }

JavaScript

//Code to prevent the button from firing the toggle
$('.menu').click(function (e) {
	$('.sub').slideToggle(400);
});	
$('.sub input[type="image"]').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
});