jQuery addClass example

Change class name on click in jQuery

by haluk karamete

HTML

<p>Problem Statement:<br> Clicking the red link below does work and opens the hidden area in toggle fashion, however, when the toggle event is complete, there is a flickery repositioning of the content below ( the pink stuff moves up a few px. ) <p><p>
How do we prevent this flicker from happening?
</p></p>
     


<div>
<a href="#collapse1" class="sp-toggle"><center><center><font color=red><b>CLICK ME</b></font></a></center>
			</div>
			<div id="collapse1" style="display:none">
				<p>Content. I was once hidden. </p>
			</div>
      
      <p><font color='pink'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada fames ac. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Eget dolor morbi non arcu risus quis varius quam quisque. Commodo ullamcorper a lacus vestibulum sed arcu non. Senectus et netus et malesuada. Vel turpis nunc eget lorem dolor sed viverra ipsum. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Eget arcu dictum varius duis at consectetur lorem donec. Eu ultrices vitae auctor eu augue ut lectus. Sapien eget mi proin sed libero enim sed faucibus. Iaculis at erat pellentesque adipiscing commodo elit at. Pulvinar elementum integer enim neque volutpat. Integer enim neque volutpat ac tincidunt vitae semper. Nisl rhoncus mattis rhoncus urna neque viverra. Facilisi nullam vehicula ipsum a arcu cursus vitae. Consequat interdum varius sit amet mattis vulputate enim. Vulputate mi sit amet mauris commodo quis imperdiet.
</p>
<p>
Ac orci phasellus egestas tellus. At lectus urna duis convallis convallis. Eget felis eget nunc lobortis. Feugiat in ante metus dictum at. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Aliquet sagittis id consectetur purus ut faucibus pulvinar. Vel quam elementum pulvinar etiam non quam...

JavaScript

$(document).ready(function() {
				$('.sp-toggle').click(function(){
					//get collapse content selector
					var collapse_content_selector = $(this).attr('href');					
					
					//make the collapse content to be shown or hide
					var toggle_switch = $(this);
					$(collapse_content_selector).toggle(function(){

						if($(this).css('display')=='none'){
							//toggle_switch.html('Show');//change the button label to be 'Show'
						}else{
							//toggle_switch.html('Hide');//change the button label to be 'Hide'
						}
						
					});
				});
				
			});