Nicholas Cheek

LITTLE ROCK WEB DEVELOPER

This code can be used to pop a div from the side of a page, then it hides and displays another div when clicked.

<script>
	 $(document).ready(function(){
	    $("#searchbutton").click(function(){
	      $("#sitesearch").toggle();
	      $("#sitecalendar").hide();
	      });
	    
	      $(".searchbutton-inactive").click(function(){
	    
	      $("#sitesearch").toggle();
	      $(".calendarbutton-inactive").removeClass("calactive");
	      $("#sitecalendar").hide();
	      $(this).toggleClass("searchactive");
	      });
	    $(".calendarbutton-inactive").click(function(){
	      $("#sitecalendar").toggle();
	      $(".searchbutton-inactive").removeClass("searchactive");
	      $("#sitesearch").hide();
	      $(this).toggleClass("calactive");
	      });
	       //hide if clicked outside of the div
	       //and remove the classes
	     $(document).click(function() {
	      
		  $("#sitecalendar").hide();
		  $("#sitesearch").hide();
		  $(".calendarbutton-inactive").removeClass("calactive");
		  $(".searchbutton-inactive").removeClass("searchactive");
	      });
	      $("#sitecalendar,#sitesearch").click(function(e) {
		  e.stopPropagation(); // This is the preferred method.
		  
	      });
	      $(".calendarbutton-inactive,.searchbutton-inactive").click(function(e) {
		  e.stopPropagation(); 
		 
	      });
	  });
	</script>

LITTLE ROCK WEB DEVELOPER

Living the dream.

nick@nicholascheek.com