Html – jQuery toggle to display and hide content

htmljqueryjquery-uitoggle

I have created show hide content script with jQuery but I don't want to slide content when toggle. Currently my content moving from left to right that I don't want.

My HTML:

<div id="menu-item-775">
  <a href="#collapse1">
    Contact
  </a>
</div>
<div id="collapse1" style="display:none">
  <div id="contact_main" style="width:100%; height:300px;">
    <div style="float:left; width:55%; color:#FFF; margin:4% 0 0 5%;">
      <div class="contact">
        <p>
          CONTACT 
        </p>
      </div>
      <div>
        FOR BOOKING & SPECIAL APPEARANCES
      </div>
      <div style="padding:">
        14 Tottenham Court Road
        London
        England
        W1T 1JY
      </div>
      <div>
        Phone: XXX / 555-3333
      </div>
    </div>
    <div style="float:right; width:40%;">
      Right
    </div>
  </div>
</div>

My JS:

$(document).ready(function() {
    $('#menu-item-775 a').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') {
                //change the button label to be 'Show'
                //toggle_switch.html('Show');
                } else {
                //change the button label to be 'Hide'
                //toggle_switch.html('Hide');
                }
        });
    });

});

Fiddle: Sample

Any ideas or suggestions? Thanks.

Best Answer

Simply try :visible with is() like,

$(collapse_content_selector).slideToggle(function () {
    $(this).is(':visible')? toggle_switch.text('Hide') : toggle_switch.text('Show');
});

Demo

Read slideToggle()

Related Topic