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
<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>
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.
$(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.
Another version, with no references to a menu, except in the comments / documentation. Original author is given, not me.
/***********************************************************************************************************************
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
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.
<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>