I have three headers that are inline-block div’s using slideToggle.
(this is one example of the three divs)
<div class="descriptions"> this is an example </div>
If I click on one of the headers it will display the info beneath it. What I’m looking for is for none of the headers to move when one is clicked. Please view my website to see my example. http://mast.salemstate.edu/itc18244/Portfolio/index2.html Any help would be appreciated!
After looking at your site I believe I have a solution. The problem with your site is flow of elements when they are being rendered. When on of your divs that are being toggled visible they need X amount of room due to the flow of the page. Therefore, moving the other elements on the page. You need to take the toggled divs out of the normal rendering flow. I achieved this by setting their
absolute then doing some math to give them a
relative position. Check out this fiddle: http://jsfiddle.net/0fm3b3pa/