I'm looking to enhance the functionality of this show/hide HTML div using JavaScript.
HTML
<a href="#" class="clickme">Menu 1</a>
<div class="box">
<span><span class="labelText"><span></span>Number 1</span></span>
<input type="text" value="" maxlength="50"><br/>
<span><span class="labelText"><span></span>Number 2</span></span>
<input type="text" class="inputclmsize1" value="" maxlength="50" aria-invalid="false"><br>
<a href="">Submit</a>
</div>
<a href="#" class="clickme">Menu 2</a>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
</div>
CSS code
body {
font: 12px/16px sans-serif;
margin: 10px;
padding: 0;}
.clickme {
background-color: #eee;
border-radius: 4px;
color: #666;
display: block;
margin-bottom: 5px;
padding: 5px 10px;
text-decoration: none;}
.clickme:hover {
text-decoration: underline;}
.box {
background-color: #ccc;
border-radius: 4px;
color: #333;
margin: 5px 0;
padding: 5px 10px;
width: auto;}
Javascript code
$('.box').hide();
// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {
// This is only needed if your using an anchor to target the "box" elements
e.preventDefault();
// Find the next "box" element in the DOM
$(this).next('.box').slideToggle('fast');
});
});
When I click on the Menu1 link, two text columns appear with a submit link. I wish that when I click the submit button, Menu 1 closes and Menu 2 description opens automatically. How can I achieve this? Can anyone help with a solution? :( Fiddle link provided here: http://jsfiddle.net/rn4qdyue/2/