fading in divs from buttons

fading in divs from buttons

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.

Here's my code:

$(function() {
   
      //on click
      $('.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-'+incoming).fadeIn (1500);   
                  current_text = 'Content_text-'+incoming;   
            });
      });
   });



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>
            
      </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>

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


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


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


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


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


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


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

         
         
      </div>



   <div id="Content_text-COMFORT" class="hidden">
         <h2>COMFORT</h2>
         
         <p>Thousands of precision engineered components contour to the natural curves of the body making sleep
         a completely new experience.</p>
         </div>
         
         
         <div id="Content_text-CONSISTENCY" class="hidden">
         <h2>CONSISTENCY</h2>
         
         <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>
         
         
         <div id="Content_text-HYGIENE" class="hidden">
         <h2>HYGIENE</h2>
         
         <p>Designed with hygiene as a priority, the structure is easy-clean throughout with all padding removable
         and washable.</p>
         </div>
         
         
         <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>
         
         
         <div id="Content_text-ADAPTABILITY" class="hidden">
         <h2>ADAPTABILITY</h2>
         
         <p>Modular construction therefore easy to deliver and simple to lengthen. Outer frame with interchangeable
         decorative items allow for endless styling options. </p>
         </div>
         
         
         <div id="Content_text-ENVIRONMENT" class="hidden">
         <h2>ENVIRONMENT</h2>
         
         <p>Developed and created with environmental sustainability in mind, the unique patented technology is a
         radical leap away from throwaway mattress technology. </p>
         </div>
         
         
         <div id="Content_text-SLEEPSCAPE" class="hidden">
         <h2>SLEEPSCAPE</h2>
         
         <p>State of the art technology as well as optional lighting and audio-visual systems providing a scientifically
         researched and holistic sleep solution.</p>
         </div>
         



Any enlightenment greatly appreciated.

[/code]