I've implemented a jQuery plugin found here. This is the HTML I'm using:
<div class="account_window" style="display:none;">
<div class="coda-slider" id="slider-id">
<div>
<h2 class="title">Option1</h2>
<p>Content 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>
Here's the jQuery code:
$('#slider-id').codaSlider({
firstPanelToLoad: 1,
dynamicArrows: false
});
After trying to add style="display:none;" to the HTML, the tabs display incorrectly. Without it, they work fine. Here's a demo showing the issue. Can anyone explain why it's behaving this way?