Slidetoggle inconsistencies with display

Question

I made a simple system that allows me to display information in a toggled panel. My problem is slidetoggle 'sometimes' toggles the display of the panels incorrectly as block and sometimes as the correct css set inline-block.

Most answers I have seen say to merely set the display type after slidetoggle but this results in a choppy appearance change mid animation.

 $(document).ready(function() { // hide all div containers $('#collapsible-panels div.yanswer').hide(); // append click event to the a element $('#collapsible-panels a').click(function(e) { // find class of clicked object, first class only because it's the one we initially set var cN = $(this).attr('class').split(' ')[0]; // if there is a tab with our corresponding class active, we close it and toggle active off of it. if ($(this).nextAll('#collapsible-panels div.' + cN + '.active').length != 0) { $(this).nextAll('#collapsible-panels div.' + cN).first().slideToggle(); $(this).nextAll('#collapsible-panels div.' + cN).first().toggleClass('active'); $(this).toggleClass('tabbed'); e.preventDefault(); } //if there is no tab open, find object with the corresponding class and open it and toggle as active. else if ($(this).nextAll('#collapsible-panels div.active').length == 0) { $(this).nextAll('#collapsible-panels div.' + cN).first().slideToggle(); $(this).nextAll('#collapsible-panels div.' + cN).first().toggleClass('active'); $(this).toggleClass('tabbed'); e.preventDefault(); } //else, basically if a tab is open that is not our chosen tab, find the tab we want to open, close all others, set to inactive then open/activate the selected tab. else { $(this).nextAll('#collapsible-panels div.' + cN).first().prevAll('#collapsible-panels div.active').slideToggle(); $(this).nextAll('#collapsible-panels div.' + cN).first().prevAll('#collapsible-panels div.active').toggleClass('active'); $(this).nextAll('#collapsible-panels div.' + cN).first().nextAll('#collapsible-panels div.active').slideToggle(); $(this).nextAll('#collapsible-panels div.' + cN).first().nextAll('#collapsible-panels div.active').toggleClass('active'); $(this).nextAll('#collapsible-panels div.' + cN).first().delay(500).slideToggle(); $(this).nextAll('#collapsible-panels div.' + cN).first().toggleClass('active'); $(this).toggleClass('tabbed'); $(this).nextAll('#collapsible-panels a.tabbed').toggleClass('tabbed'); $(this).prevAll('#collapsible-panels a.tabbed').toggleClass('tabbed'); e.preventDefault(); } }); }); 

 .tabs { margin: 4%; text-align: center; } .tabs a { white-space: nowrap; vertical-align: middle; display: inline-block; text-decoration: none; padding: 15px 25px; margin: 0px; background: #CE1F24; color: #FFF; border-radius: 15px; border: solid 1px #C00000; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); } .tabs a:hover { background: #B80000; border: solid 1px #880000; text-decoration: none; border-bottom-width: 0px; } .tabs a:focus { outline: none; } .tabs a.tabbed { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); background: #587CAF; border: solid 1px #587CAF; border-bottom-width: 0px; } .tabs a:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); background: #587CAF; border: solid 1px #587CAF; border-bottom-width: 0px; } .tabs div.yanswer { vertical-align: middle; display: inline-block; padding: 20px 60px; margin-top: 5px; background: #FFF; color: #000; border-radius: 40px; border: solid 4px #587CAF; z-index: 10; } .tabs div.yanswer p { font-size: 3em; width: auto; } .tabs div.yanswer ul { font-size: 1.3em; } .tabs div.yanswer p.smallfont { font-size: 1em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="collapsible-panels" class="tabs"> <a class="ylead" href="#">Why Should I Lead?</a> <a class="yhelp" href="#">Why Should I Help?</a> <br> <div class="ylead yanswer"> <p>If you lead a project you can...</p> <br> <ul> <li>Show management what you can do.</li> <li>Make decisions.</li> <li>Add to your resume.</li> <li>*Earn money or time off.*</li> </ul> <br> <p class="smallfont">*eligible for Tasks with 6+ week turnarounds</p> </div> <div class="yhelp yanswer"> <p>If you help with a project you can...</p> <br> <ul> <li>Show management what you can do.</li> <li>Learn something new.</li> <li>Help make decisions.</li> <li>Add to your resume.</li> </ul> </div> </div> 

It appears that with the developer console open in chrome the display always stays as inline-block, if not it usually displays as block.

Answer 1

I found an answer to my own question. With the hack fix in place, which was to set the display to inline-block after the toggle, I noticed it only had to apply once and after that slideToggle() would correctly go between display:none and display:inline-block.

I think the problem was that my .hide() was setting my panels display to none before the css ever set them as inline-block, therefore slideToggle() didn't know what default display to use, and instead reverted to block. I fixed this by adding $('#collapsible-panels div.yanswer').css('display', 'inline-block'); before my .hide(). This ensures slideToggle() knows they are supposed to be inline-block.