View Full Version : fading in divs from buttons

09-09-2009, 06:20 PM
Hi all,

I'm not sure if I'm going about this in the right way. What I'm doing doesn't seem to be working anyway.

I'm trying to fade in a couple of divs when a button is clicked a fade out the current divs.

It's all not quite working as planned though. When a button is clicked the current div is not fading out.

It looks like the 'current' variable is not working.

The first button pressed works as the 'current' variable is already set but I can't seem to be able to update it with further button clicked.

Any suggestions? Am i going about this in the wrong way?

Here's a link to the page:

Here's my code:

$(function() {

//on click
$('div.benefit_buttons a').click(function() {

// get id
var current = '#Content-Display';
var current_text = '#Content_text-Display';
var incoming = $(this).attr('id');

//fade in image div and reset current variable
$(current).fadeOut (1500, function(){
$('#Content-'+incoming).fadeIn (1500);
current = '#Content-'+ incoming;

//fade in text div and reset current_text variable
$(current_text).fadeOut (1500, function(){
$('#Content_text-'+incoming).fadeIn (1500);
current_text = '#Content_text-'+ incoming;
return false;

The buttons:

<div class="rightcolumn" id="benefit_buttons">

<div class="benefit_buttons"> <a href="#" id="COMFORT"><img src="images/homepg/benefit_buttons/comfort.jpg" alt="COMFORT" />COMFORT</a></div>

<div class="benefit_buttons"> <a href="#" id="CONSISTENCY"> <img src="images/homepg/benefit_buttons/consistency.jpg" alt="CONSISTENCY" />CONSISTENCY</a></div>

<div class="benefit_buttons"> <a href="#" id="HYGIENE"><img src="images/homepg/benefit_buttons/hygiene.jpg" alt="HYGIENE" />HYGIENE</a></div>

<div class="benefit_buttons"> <a href="#" id="AIR_FLOW"><img src="images/homepg/benefit_buttons/air_flow.jpg" alt="AIR FLOW" />AIR FLOW</a></div>

<div class="benefit_buttons"> <a href="#" id="ADAPTABILITY"><img src="images/homepg/benefit_buttons/adaptability.jpg" alt="ADAPTABILITY" />ADAPTABILITY</a></div>

<div class="benefit_buttons"> <a href="#" id="ENVIRONMENT"><img src="images/homepg/benefit_buttons/environment.jpg" alt="ENVIRONMENT" />ENVIRONMENT</a></div>

<div class="benefit_buttons"> <a href="#" id="SLEEPSCAPE"><img src="images/homepg/benefit_buttons/sleepscape.jpg" alt="SLEEPSCAPE" />SLEEPSCAPE</a></div>


and the content:

<div class="rightcolumn" id="benefits">

<div id="Content-Display">
<p><img src="images/homepg/hp_start_img.png" alt="Ammique" /></p>

<div id="Content-COMFORT" class="hidden">
<p><img src="images/homepg/Comfort.jpg" alt="Comfort" /></p>

<div id="Content-CONSISTENCY" class="hidden">
<p><img src="images/homepg/Consistency.jpg" alt="Consistency" /></p>

<div id="Content-HYGIENE" class="hidden">
<p><img src="images/homepg/Hygiene.png" alt="Hygiene" /></p>

<div id="Content-AIR_FLOW" class="hidden">
<p><img src="images/homepg/AirFlow.jpg" alt="Air Flow" /></p>

<div id="Content-ADAPTABILITY" class="hidden">
<p><img src="images/homepg/Adaptability.jpg" alt="Adaptability" /></p>

<div id="Content-ENVIRONMENT" class="hidden">
<p><img src="images/homepg/Environment.jpg" alt="Environment" /></p>

<div id="Content-SLEEPSCAPE" class="hidden">
<p><img src="images/homepg/Sleepscape.jpg" alt="Sleepscape" /></p>


<div id="Content_text-COMFORT" class="hidden">

<p>Thousands of precision engineered components contour to the natural curves of the body making sleep
a completely new experience.</p>

<div id="Content_text-CONSISTENCY" class="hidden">

<p>The unique use of stainless steel extension springs within the system ensures that it will not deteriorate
despite many years of use.</p>

<div id="Content_text-HYGIENE" class="hidden">

<p>Designed with hygiene as a priority, the structure is easy-clean throughout with all padding removable
and washable.</p>

<div id="Content_text-AIR_FLOW" class="hidden">
<h2>AIR FLOW</h2>

<p>Within the structure a void allows excellent air circulation, helping to regulate the body’s temperature
throughout the night. </p>

<div id="Content_text-ADAPTABILITY" class="hidden">

<p>Modular construction therefore easy to deliver and simple to lengthen. Outer frame with interchangeable
decorative items allow for endless styling options. </p>

<div id="Content_text-ENVIRONMENT" class="hidden">

<p>Developed and created with environmental sustainability in mind, the unique patented technology is a
radical leap away from throwaway mattress technology. </p>

<div id="Content_text-SLEEPSCAPE" class="hidden">

<p>State of the art technology as well as optional lighting and audio-visual systems providing a scientifically
researched and holistic sleep solution.</p>

Any enlightenment greatly appreciated.

09-10-2009, 02:55 PM
Ok got it working with this thread: