I am currently working on creating an index for a large list. However, I have encountered an issue where clicking on a letter to display its contents also pushes the other letters on the index bar (left nav) down. I want the other letters to stay collapsed when toggling the contents. I have tried using float, but it floated too far away, and margin-left sometimes works depending on the browser size. Now I am attempting to clear floats with jQuery, but I seem to be doing something wrong.
<div class="list-container ">
<div class="title">
<button>A</button>
</div>
<div class="title-contents">
<li class="contents-description">
<a href="#">✙ 50 Wheel Mfg.</a> <span style="font-size:100%;color:yellow;">
<a href="#">★</a></span>
</li>
<p>
<strong>Class Code:</strong> 50
<br><strong>Premium Base: </strong>Gross Sales
<br><strong>Note:</strong>
<br>The following shall be separately classified and rated:
<br>- food
<br>- drink
</p>
</div>
<div class="title">
<button>B</button>
</div>
</div>
As for my jQuery code:
$(document).ready(function() {
$('.title-contents').hide();
$('p').hide();
$('.title').click(function() {
$(this).next('.title-contents').css({"marginLeft": "200px"
}).css({"clear": "both"}).fadeToggle(700);
});
$('.contents-description').click(function() {
$(this).next('p').css("background-color", "white").fadeToggle(700);
$(this).css("font-weight", "bold");
});
});