Show Hide in jQuery

EasyProgramming.net jQuery Tutorial

by Nazmus Nasir

HTML

<!-- Easy jQuery - Show and Hide - #7 -->
<p>
Welcome to the seventh Easy jQuery Tutorial, part of <a href="https://www.easyprogramming.net">EasyProgramming.net</a>. In this tutorial, we'll build on our shopping cart and add a show or hide field! 
</p>
<p>
We'll be using event listeners, append, and show() and hide(). 
</p>
<p>
<button id="exampleShow">
Show
</button>
<button id="exampleHide">
Hide
</button>
<button id="toggleMe">
Toggle
</button>
<span id="exampleItem">WHAT AM I?!</span>
</p>
<form id="shoppingForm">
<input id="addToList" type="text" /> <button id="addBtn">Add</button><br />
</form>

<h2>
Our Shopping List: <span id="tooMany">Too Many items on your list!</span>
</h2>
<ul id="shoppingList">
  <li>Milk</li>
</ul>
<button id="showHidden">
Show Hidden
</button>

CSS

td, th {
  padding: 10px;
  border-bottom: solid #000 1px;
}

#tooMany{
  display: none;
  color: red;
}

JavaScript

$('#toggleMe').on('click', function(){
	$('#exampleItem').toggle('slow');
});

$('#exampleShow').on('click', function(){
	$('#exampleItem').show('slow');
});

$('#exampleHide').on('click', function(){
	$('#exampleItem').hide('fast');
});

$("#shoppingForm").on('submit', function(e){
	var text = $('#addToList').val();
  $('#shoppingList').append($('<li>').append(text));
  $('#addToList').val('');
  e.preventDefault();
});

$('#shoppingList').on('dblclick', 'li', function(){
	$(this).hide(1000);
});

$('#showHidden').on('click', function(){
	$('#shoppingList li').show();
});






/* $('#shoppingList').on('dblclick', 'li', function(){
  $(this).remove();
}); */