jQuery toggleClass example

Toggle class name on click in jQuery

by reporter

HTML

<p>Name: George Bob</p>

  <div>
  <p class="test">Test 1: Hide and Show</p>
   <p class="picked">When you click on <a href="#">this</a> all paragraphs of class 'picked' should take 1.5sec and hide</p>
   <p id="show_hidden"><a href="#">Should</a> should not hide and on click should show hidden</p>
   <p class="picked">This should hide as well</p>
  </div>

CSS

.important {
          font-weight: bold;
          font-size: xx-large;
        }
        .set_colour {
          color: blue;
        }
        .test
        {
            width: 500px;
        }
        div
        {
            padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; margin-top: 3px; margin-right: 3px; margin-bottom: 3px; margin-left: 3px; border-top-color: navy; border-right-color: navy; border-bottom-color: navy; border-left-color: navy; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: solid; height:200px;
        }

JavaScript

$(document).ready(function(){
	$(".picked").click(function()
	{
		$(".picked").each(function()
		{
			$(this).hide();
		});
	});

	$("#show_hidden").click(function() {
		$(".picked").each(function()
		{
			$(this).show();
		});
	});
});