I'm starting my JQuery scripting journey and to test my skills in the basics, I am working on a simple dropdown menu using JQuery. The code is functioning perfectly, but there's a small issue - I want the text to close when I click again on the button that opened it. Here is the code snippet:
$( ".select1" ).click(function() {
$(".content1").css("display", "block");
});
$( ".select2").click(function() {
$(".content2").css("display", "block");
})
$(".select3").click(function() {
$(".content3").css("display", "block");
})
$(".select4").click(function() {
$(".content4").css("display", "block");
})article {
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class="dropdown-wrapper">
<p class="select1">Select 1</p>
<article class="content1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae mollitia aliquid quas doloremque, repudiandae vel odio nisi repellendus accusantium temporibus distinctio labore, debitis tenetur, in assumenda. Odio possimus pariatur, vitae!</article>
<p class="select2">Select 2</p>
<article class="content2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas iure, doloribus qui quasi est, quo obcaecati modi ab nesciunt pariatur a id rerum reprehenderit, beatae corrupti consequatur ut placeat ipsa!</article>
<p class="select3">Select 3</p>
<article class="content3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque voluptate beatae placeat nobis porro, id ipsum. Incidunt minima deserunt, delectus. Ad unde obcaecati natus quo excepturi, tempore consectetur odio explicabo.</article>
<p class="select4">Select 4</p>
<article class="content4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium ex ipsa dolor alias ratione repellat eos? Eveniet architecto officiis, veniam reiciendis animi, enim aperiam error dignissimos expedita laborum eius.</article>
</div>
</body>
</html>