Write jQuery code to show and hide a panel with one button

Description: One button must open the panel if it is closed, and close it if it is open.

Hint:

• Use .toggle() or .slideToggle().

---

HTML of the page

<button id="btn">Open / Close</button>
<div id="panel" style="display:none">Panel content</div>

Solution

$('#btn').on('click', function () {
  $('#panel').slideToggle(300);
});

$('#btn').click();
console.log('after click 1: ' + $('#panel').css('display'));
$('#btn').click();
console.log('after click 2: ' + $('#panel').css('display'));

How it works

• slideToggle() slides the panel down if it is hidden, and up if it is visible.
• The panel starts hidden, so the first click opens it.

Read Fade and Slide Effects.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.