Question

I am getting a very weird jQuery effect on a website I am building.

http://www.real-visual.com/site/Technology/

On this page, in the left panel, you will see 4 orange links. If you click one, it slides open a content panel. Then, if you click a different orange link, it slides closed the first panel and slides open the second one.

However, you will notice a weird effect where, when a slide is sliding closed, the content inside it changes.

Here is an example of the jQuery code that powers these slides:

$("#panel-2-button").click(function() {
    if ($('.togglepanel').is(':visible')) { $(".togglepanel").hide("slide", { direction: "left" }, 1000); }
    $("#content-inner-panel-2").toggle("slide", { direction: "left" }, 1000); 
});
$("#panel-2-button-medium").click(function() {
    if ($('.togglepanel').is(':visible')) { $(".togglepanel").hide("slide", { direction: "left" }, 1000); }
    $("#content-inner-panel-2-medium").toggle("slide", { direction: "left" }, 1000);
});
$("#panel-2-button-large").click(function() {
    if ($('.togglepanel').is(':visible')) { $(".togglepanel").hide("slide", { direction: "left" }, 1000); }
    $("#content-inner-panel-2-large").toggle("slide", { direction: "left" }, 1000);

});

And here is an example of the HTML:

<div id="content-inner-panel-2-medium" class="togglepanel">
    <h1>Microsoft Kinect</h1>
    <p>Text Here</p>
    <div id="panel-2-close-medium"></div>
</div>

 <div id="content-inner-panel-3-medium" class="togglepanel">
    <h1>Large Screen & Immersive</h1>
    <p>Text Here</p>
    <div id="panel-3-close-medium"></div>
 </div>

  <div id="content-inner-panel-4-medium" class="togglepanel">
    <h1>Mobile Phones & Tablets</h1>
    <p>Text Here</p>
    <div id="panel-4-close-medium"></div>
  </div>

  <div id="content-inner-panel-5-medium" class="togglepanel">
    <h1>Games Controllers & Remotes</h1>
    <p>Text Here</p>
    <div id="panel-5-close-medium"></div>
  </div>

Does anyone know why the weird content-switcharound bug is occuring when a slide closes and how to fix it?

Answer 1

The problem is the line:

if ($('.togglepanel').is(':visible')) { $(".togglepanel").hide("slide", { direction: "left" }, 1000); }

specifically:

$(".togglepanel").hide("slide", { direction: "left" }, 1000);

That line hides the first element in the .togglepanel that it finds (which would be the Kinect one) and hides that. You need to find the id of the visible .togglepanel and hide that id, not just class:

var visiblepanel = 'none';
$('.togglepanel').each(function(){
    if ($(this).is(':visible')) {
        visiblepanel = $(this).attr('id');
    }
});
if (visiblepanel != 'none'){ $(visiblepanel).hide("slide", { direction: "left" }, 1000); }

that last line might need to prepend the # symbol like so:

if (visiblepanel != 'none'){ $('#' + visiblepanel).hide("slide", { direction: "left" }, 1000); }