0

Building an index for a huge list. But each time I click on a letter, it will show the contents, but it also pushes the other letters on the index bar (left nav) down. I want them to stay collapsed when toggling the contents. I tried using float, and that worked, but it floated to far away. I used margin-left and that will work sometimes depending on the size of the browser. Now I am trying clearing floats with jquery, nut doing something wrong. Here is my example in fiddle https://jsfiddle.net/jim54729/zsofv9dm/1/ and here is some of my code: I had to remove my ul elements as it messed up my css in jfiddle. must of been pulling formating from our core.css.

<div class="list-container ">  
  <div class="title">
    <button>A</button>
  </div>
  <div class="title-contents"> 
   <li class="contents-description">
     <a href="#">&#10009; 50 Wheel Mfg.</a>&nbsp;&nbsp;&nbsp;<span style="font-size:100%;color:yellow;">
     <a href="#">&starf;</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>

and my jquery

$(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");
  });

});
Jim Schwetz
  • 105
  • 2
  • 12

1 Answers1

0

You can apply position: absolute; to your .title-contents so they are out of the flow. This way they won't push the next nav elements down the page.

Here's an updated fiddle https://jsfiddle.net/zsofv9dm/2/

mac
  • 858
  • 1
  • 6
  • 11
  • That works good, except each letter clicked puts the contents over each other. Is there a way to have each new div appear below each other? So once you click A, its contents will appear, and while still visible, if you click b, I would need b's contents to appear below the contents of A. – Jim Schwetz Jan 28 '16 at 18:19
  • I will just rewrite the code to keep the Letters (index) in a seperate div with thier own id's to open on click. Was hoping not to have to rewrite it, but I should of planned it better before coding it. :( Thanks for your idea. – Jim Schwetz Jan 29 '16 at 13:07