SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    toggle on and off of 4 divs with 4 buttons

    I've made a start on a show and hide bit of functionality for the visitor.

    Basically its 4 buttons and there will be 4 divs with stuff inside them, I have it so they sort of work, but its not quite right in that what i want is id="step-1" to be seen initially, but on click of any of the others, it goes away and then one selcted shows, and so on across all four buttons.

    http://www.cristalstandards.com/dev/contact.php

    Code:
    <script type="text/javascript">
       function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
       }
    </script>
    <div id="contact_Map_Wrapper">
    <div id="contact_Map_1"><a href="#step-1" onclick="toggle_visibility('step-1');"><img src="./images/contact/1/Off/Americas_Grey.png" onmouseover="this.src='./images/contact/1/On/Americas.png'" onmouseout="this.src='./images/contact/1/Off/Americas_Grey.png'" /></a></div>
    
    <div id="contact_Map_2"><a href="#step-2" onclick="toggle_visibility('step-2');"><img src="./images/contact/2/Off/Europe_Grey.png" onmouseover="this.src='./images/contact/2/On/Europe.png'" onmouseout="this.src='./images/contact/2/Off/Europe_Grey.png'" /></a></div>
    
    <div id="contact_Map_3"><a href="#step-3" onclick="toggle_visibility('step-3');"><img src="./images/contact/3/Off/Middle_East_&_Africa_Grey.png" onmouseover="this.src='./images/contact/3/On/Middle_East_&_Africa.png'" onmouseout="this.src='./images/contact/3/Off/Middle_East_&_Africa_Grey.png'" /></a></div>
    
    <div id="contact_Map_4"><a href="#step-4" onclick="toggle_visibility('step-4');"><img src="./images/contact/4/Off/Asia_Grey.png" onmouseover="this.src='./images/contact/4/On/Asia.png'" onmouseout="this.src='./images/contact/4/Off/Asia_Grey.png'" /></a></div>
    </div>
    <div id="step-1"> 
            <h2 class="StepTitle">Perfil</h2>
    </div>
    <div id="step-2"> 
            <h2 class="StepTitle">Perfil 2</h2>
    </div>
    <div id="step-3"> 
            <h2 class="StepTitle">Perfil 3</h2>
    </div>
    <div id="step-4"> 
            <h2 class="StepTitle">Perfil 4</h2>
    </div>

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    google for jquery accordion, or possibly jquery accordion, open

    I use this on an accordion menu.
    The initial bits with nav, ul, li, and a are what you would edit to match your code. The class="open" can be added manually to the one you want to be open when the page is first viewed.
    Code:
    $(document).ready(function(){
      $("#nav > li > a").on("click", function(e){
    var elem = $(this).next();
    if(elem.is("ul")){
    e.preventDefault();
    }
        
        if(!$(this).hasClass("open")) {
          // hide any open menus and remove all other classes
          $("#nav li ul").slideUp(450);
          $("#nav li a").removeClass("open");
          
          // open our new menu and add the open class
          $(this).next("ul").slideDown(450);
          $(this).addClass("open");
        }
        
        else if($(this).hasClass("open")) {
          $(this).removeClass("open");
          $(this).next("ul").slideUp(350);
        }
      });
    });
    I might have a simpler version somewhere as well.

    You would save the above to a script - whatever name seems suitable to you, but accordion.js is logical, load jquery in the header, followed by the script in the header, and dump the on-click stuff you're using.

    You can see it working as a menu here http://sky-web.net/vincent/about-the-vincent-mph.htm
    a sample page from a site that is not live yet, with part of the accordion open on loading.

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Another version, with no references to a menu, except in the comments / documentation. Original author is given, not me.

    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('slow');
       
    		//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('slow');
    		 }
    		  
    	 });
    	  
    	
    	/*** 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');
    
    });
    Put each of the items in their own div like this <div class="accordionButton"> your content goes here</div>

    Name the one you wish to be open on page load thus <div class="accordionButton" id="open">

    As before, load jquery library in the header, followed by the script file, again accordion.js.
    Style your accordionButton divs to suit in your css. The classes "on", "over" and accordionButton as the ones to play with inthe css.

    You could substitute something shorter for the accordionButton class name of course

    See this one in action at http://ukfolkfestivals.co.uk/scotland.php

  4. #4
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok have gone down a slightly different route as I just cant get an handle on it, so have this below and I still cant get the b****y thing to work.

    Code:
    <script>
    $(".link").click(function(e) {
        e.preventDefault();
        $('.content-container div').fadeOut('slow');
        $('#' + $(this).data('rel')).fadeIn('slow');
    });
    </script>
    
    .content-container {
        position: relative;
        width: 400px;
        height: 400px;
    }
    .content-container div {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    <div style="position:relative; width:100%; height:800px; margin-top:40px;">
    <div style="position:relative; float:left; width:163px; height:auto; margin-bottom:20px;">
      <a class="link" href="#" data-rel="content1"><img src="images/clients/corinthia.png" width="163" height="102" border="0" /></a>
      <a class="link" href="#" data-rel="content2"><img src="images/clients/bahia.png" width="163" height="102" border="0" /></a>
      <a class="link" href="#" data-rel="content3"><img src="images/clients/barcelo.png" width="163" height="102" border="0" /></a>
      <a class="link" href="#" data-rel="content4"><img src="images/clients/IHG.png" width="163" height="102" /></a>
      <a class="link" href="#" data-rel="content5"><img src="images/clients/four_Seasons.png" width="163" height="102" /></a>
      <a class="link" href="#" data-rel="content6"><img src="images/clients/sunwing.png" width="163" height="102" /></a>
      <a class="link" href="#" data-rel="content7"><img src="images/clients/hilton.png" width="163" height="102" /></a>
      <a class="link" href="#" data-rel="content8"><img src="images/clients/iberostar.png" width="163" height="102" /></a>
      </div>
    <div style="position:relative; float:right; width:540px; height:800px;">
    <div class="content-container">
        <div id="content1">This is the test content for part 3</div>
        <div id="content2">This is the test content for part 4</div>
        <div id="content3">This is the test content for part 5</div>
        <div id="content4">This is the test content for part 6</div>
        <div id="content5">This is the test content for part 7</div>
        <div id="content6">This is the test content for part 5</div>
        <div id="content7">This is the test content for part 6</div>
        <div id="content8">This is the test content for part 7</div>
    </div>
    </div>


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
  •