SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    More Info Button

    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.

    http://bit.ly/1jjohw3

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

    many thanks
    Andy

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by neodjandre View Post
    I would appreciate some help with the code!
    By all means. Please show us the code that you currently have, and we'll help you further with it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    /***********************************************************************************************************************
    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.

    Code:
    <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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •