Question

I’m using this jquery plugin. Here’s my html:

<div class="account_window" style="display:none;">
    <div class="coda-slider"  id="slider-id">
      <div>
        <h2 class="title">Option1</h2>
        <p>Stuff for option 1</p>
      </div>
      <div>
        <h2 class="title">Password</h2>
        <form id="change_Pass" action="" method="post">
            Current Password<span style="color:red;">*</span><input type="password" id="change_password" name="change_password"><br>
            New Password<span style="color:red;">*</span><input type="password" id="new_password" name="new_password"><br>
            Verify Password<span style="color:red;">*</span><input type="password" id="verify_password" name="verify_password"><br>
            <input type="submit" value="Submit" id="change_pass_submit">
         </form>
      </div>
    </div>
</div>

And here’s the jquery:

$('#slider-id').codaSlider({
    firstPanelToLoad: 1,
    dynamicArrows: false
});

So when i remove this line style="display:none;", the tabs work and looks perfect. But when I add it the tabs look like this:

I don’t know why. There are no console errors. Here is a working demo of the problem. Why is it displaying so oddly?

Answer 1

The issue that you’re having is because the Coda Slider creates a wrapper element around the slider when it’s initialized, which does not play nicely with its parent element being hidden.

The workaround for this is to make the slider initialize after the account_window has been made visible.

To do this, change your jQuery to:

$('#show_coda').click(function(){
  $('.account_window').show();

  $('#slider-id').codaSlider({
    firstPanelToLoad: 1,
    dynamicArrows: false
  });
});