CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Shruti
Shruti

Reputation: 1574

how to show content using toggle in jQuery

I made a simple demo in JQM. In this demo there is a lot of space that is occupied by buttons and a textfield.

So I tried to hide the content with the idea to show it when a button is clicked.

I want that content only to show on button click and hide and again when the user clicks the button. Given picture I need to toggle. Here is the content I need to toggle on button click:

    <div data-role="header" data-theme="b" class="header">
        <nav>
            <ul>
                <li class="new_h"><a href="#" class="active"><i class="new"></i>New</a>
                </li>
                <li class="export_h"><a href="#"><i class="export "></i>Export</a>
                </li>
                <li class="import_h"><a href="#"><i class="import "></i>Import</a>
                </li>
                <div class="cb"></div>
            </ul>
        </nav>
    </div>

    <div data-role="content">
        <article class="testsuitbox">
            <h1>TestSuite Name</h1>
            <input name="" type="text" class="txtfield" id="testSuiteId"/>
        </article>
</div>

Upvotes: 1

Views: 63

Answers (1)

lesssugar
lesssugar

Reputation: 16191

Well, if you need to "toggle" the content, simply use .toggle().

Docs: http://api.jquery.com/toggle/

Docs example:

HTML

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">

jQuery

$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });
});

Upvotes: 3

Related Questions