Hide and show issues

JavaScript
1

So, I’m having a few issues with this hide and show jquery plugin.

You can see it at this location
http://laworganizer.com/4)%20Single%20contact%20view/SingleContactView_Accounting.html

  1. In internet explorer and google chrome there is a large gap between the “navigation” and “Total Client’s responsibility:$1,550.00 Total payments:…”
  2. When the info area is expanded then the info area pushes down beyond the content area
  3. When the info area is closed then the, “Total Client’s responsibility:$1,550.00 Total payments:…” becomes hidden.

Okay this feature just has issues for me. I’ll prob review it more tomorrow.

Any pointers would be helpful. I’m hoping there is 1 issue that causing all of these problems.

2

All of these issues are (pretty much) CSS related.

  1. The button “.ShowDetailsButton” has a fixed height set to 125px - reducing this to the actual height of the button (37px) will reduce the gap
  2. The div “.faq_container” is floated to the left, not sure if it needs to be, removing the float will fix this issue (the other solution would be to clear the float, putting an “overflow:auto;” on #BodyContent would do it)
  3. I’m assuming you’re using slideUp and slideDown on the .faq_answer_container - of course slideUp will set an inline height of 0px when it’s finished (ignoring the height in the CSS). The trick here is to set a min-height on the .faq_answer_container
3

Thanks those changed worked good for the most part but I think I may have to change my layout and place the button in that location through another method. I adjusted the “ShowDetailsButton” height which helped remove most of that spacing at the top, but it still exists for i.e. and chrome. Also, the button is only clickable on the far right of the button in firefox.

Any other suggestions? thx!

4

Okay I got the alignment to work. However, I had to move the location of the BUTTON code from the old location

…

<div id=“UserPermissionsList”>

    &lt;ul&gt;
    	&lt;li&gt;Attorneys &lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt; set/edit permissions&lt;/a&gt;&lt;/li&gt;
      &lt;!--&lt;li&gt;&lt;a href="#"&gt; + View Details&lt;/a&gt;&lt;/li&gt;--&gt;
      

      
    &lt;/ul&gt;

</div>

	&lt;/div&gt;&lt;!--faq_question--&gt;
            
	               &lt;/br&gt;
            
             
	   &lt;div class="BUTTON"&gt;


			  &lt;ul&gt;		

					&lt;li&gt;
					&lt;a class="ShowDetailsButton"&gt;
			
					&lt;/a&gt;&lt;/li&gt;



					 &lt;li&gt;
					&lt;a class="HideAnswerButton"&gt;
			
					&lt;/a&gt;
            
            
					 &lt;/li&gt;    
			&lt;/ul&gt;
            
	&lt;/div&gt;&lt;!--Button--&gt;

 .....

to the current location. The answer section still opens fine, but I can’t get it to close.

5

Excellent looks like you got it working for the most part :slight_smile:

The reason it isn’t closing is because the button’s click event handler specifically checks its parent for a class of “open” whereas everywhere else it is referred to using the .closest() method. So we can use that to fix this scenario.

While we’re here, I’d also like to show you the benefit of caching your jQuery results as they can have an impact on performance (since everytime you call the $() method it instantiates a new jQuery object that has its own memory footprint). In your case specifically the optimization would be incredibly small, but if you would have this code executed in a loop then it might be much more beneficial.

In any case, let’s get on with it :wink:

I’ve rewritten your button click handler to both check the correct element and to cache the .faq element.


$('.BUTTON').click(function(){
    
    var $faq = $(this).closest(".faq"), //caching the .faq element's jQuery representation
        newHeight; //declaring newHeight up here - JavaScript hoists the declaration up here anyway
    
    if ($faq.is('.open')) { //we now definitely have a reference to the .faq element
        $faq.find('.faq_answer_container').animate({'height':'0'},500);
        $faq.find('.letter_a').fadeOut(500);
        $faq.find('.letter_q').animate({'left':'25px'});
        $faq.removeClass('open');
    }
    else {
        newHeight = $faq.find('.faq_answer').height() + 'px';
        $faq.find('.faq_answer_container').animate({'height': newHeight } ,500);
        $faq.find('.letter_a').fadeIn(500);
        $faq.find('.letter_q').animate({'left':'10px'});
        $faq.addClass('open');
    }
    
});
6

Thanks that worked great!