More Info Button

JavaScript
1

I am looking to replicate the functionality of the “More Info” button as seen on this page but I don’t know where to start.

I suppose this has been done via Jquery. I would appreciate if anyone can share some ideas or code!

many thanks
Andy

2

They’re using drupal on that site, but yes it is something that can be done easily with jQuery as well, by using some animate techniques.

3

Thank you Paul the site you have provided has many useful examples but they are not similar to the one I want… I would appreciate some help with the code!

4

By all means. Please show us the code that you currently have, and we’ll help you further with it.

5

These are simply accordion buttons.

google on jquery accordion and you’ll get lots of examples.

The following (not be me) works okay, although it was originally made for a menu.


/***********************************************************************************************************************
DOCUMENT: includes/javascript.js
DEVELOPED BY: Ryan Stemkoski
COMPANY: Zipline Interactive
EMAIL: ryan@gozipline.com
PHONE: 509-321-2849
DATE: 3/26/2009
UPDATED: 3/25/2010
DESCRIPTION: This is the JavaScript required to create the accordion style menu.  Requires jQuery library
************************************************************************************************************************/
$(document).ready(function() {
	 
	//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
	$('.accordionButton').click(function() {
   
		//REMOVE ON STYLE FROM ALL BUTTONS
		$('.accordionButton').removeClass('on');
		  
		//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
	 	$('.accordionContent').slideUp('normal');
   
		//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
		if($(this).next().is(':hidden') == true) {
			  
			//ADD THE ON CLASS TO THE BUTTON
			$(this).addClass('on');
			  
			//OPEN THE SLIDE
			$(this).next().slideDown('normal');
		 }
		  
	 });

	 
	 	$('.close').click(function() {
   
		//REMOVE ON STYLE FROM ALL BUTTONS
		$('.accordionButton').removeClass('on');
		  
		//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
	 	$('.accordionContent').slideUp('normal');
   
		//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
		if($(this).next().is(':hidden') == true) {
			  
			//ADD THE ON CLASS TO THE BUTTON
			$(this).addClass('on');
			  
			//OPEN THE SLIDE
			$(this).next().slideDown('normal');
		 }
		  
	 });	 
	  
	
	/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
	$('.accordionButton').mouseover(function() {
		$(this).addClass('over');
		
	//ON MOUSEOUT REMOVE THE OVER CLASS
	}).mouseout(function() {
		$(this).removeClass('over');										
	});
	
	/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	
	/********************************************************************************************************************
	CLOSES ALL S ON PAGE LOAD
	********************************************************************************************************************/	
	$('.accordionContent').hide();
	
	/*
	and this last bit opens the hidden div below the first accordianButton that has id=open
	*/
	$("#open").trigger('click');

});

I modified the above to include a Close X, if the $(‘.close’) is changed back to $(‘.accordionButton’) the same button opens and closes the content.
The code opens a div immediately below it, and you can have multiple examples on the same page.


<div class="accordionButton">
visible content
</div>
<div class="accordionContent">
hidden stuff to be revealed on clicking visible stuff above.
</div>
<div class="accordionButton">
MORE visible content
</div>
<div class="accordionContent">
MORE hidden stuff to be revealed on clicking MORE visible stuff above.
</div>

Your example page opens the section above it. But if you finished a section with the view more type of hint, the hidden bit below would open.
Stick jquery in the head, with the above in a separate js file below the jquery call.

6