Hide and Show

Learning objectives#

• Use show(), hide() and toggle()
• Toggle based on a condition
• Check visibility with :visible / is(":visible")
• Keep hidden content accessible

Explanation#

.hide() sets display:none; .show() restores the element’s normal display. .toggle() flips between them.

.toggle(condition) shows when true and hides when false — ideal for “show the GST field only for business customers”.

$(el).is(":visible") tells you whether an element currently takes up space.

Pass a duration to animate: .hide(300) or .show("fast"). (Next lesson covers effects in depth.)

For content that should start hidden, set it in CSS or HTML (hidden attribute or a class) so it never flashes on page load. Update aria-expanded on the toggle button for screen readers.

Syntax#

1$('#error').show();
2$('#error').hide();
3$('#menu').toggle();
4$('#gst').toggle(isBusiness);
5$('#menu').is(':visible');

Code example: Show extra fields and toggle a FAQ#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<div style="font-family:sans-serif">
3  <label><input type="checkbox" id="business"> Buying for a business</label>
4  <p id="gstRow" hidden>GST number: <input></p>
5

6  <button id="faqBtn" aria-expanded="false" aria-controls="faq">Show FAQ</button>
7  <div id="faq" style="display:none">Delivery takes 3–5 days.</div>
8</div>
9<script>
10  $(function () {
11    $('#business').on('change', function () {
12      $('#gstRow').prop('hidden', false).toggle(this.checked);
13    });
14

15    $('#faqBtn').on('click', function () {
16      $('#faq').toggle();
17      const open = $('#faq').is(':visible');
18      $(this).text(open ? 'Hide FAQ' : 'Show FAQ').attr('aria-expanded', open);
19      console.log('FAQ visible:', open);
20    });
21  });
22</script>

Ticking “Buying for a business” shows the GST field; unticking hides it. The FAQ button shows and hides the answer, changes its own label, updates aria-expanded, and logs “FAQ visible: true/false”.

Step-by-step explanation#

1. The GST row starts hidden with the hidden attribute, so it never flashes.
2. .toggle(this.checked) shows the row only while the checkbox is ticked.
3. The FAQ toggle flips visibility, then reads it back with is(":visible").
4. The button text and aria-expanded reflect the state for all users.

Real-world use case#

Common mistakes#

Best practices#

• Start hidden in markup, reveal with JS
• Use toggle(condition) for state
• Update aria-expanded on toggle buttons
• Prefer classes for complex show/hide styling

Remember this#

Practice exercise#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<input type="password" id="pw"> <span id="hint" style="color:red;display:none">Password too short</span>
3<script>
4  $(function () {
5    $('#pw').on('input', function () {
6      $('#hint').toggle(this.value.length > 0 && this.value.length < 8);
7    });
8  });
9</script>

Mini quiz#

Want more? Practise all jQuery MCQs · jQuery interview questions

Related topics#

My notes#

Saved in this browser.