jQuery Effect - Hide and Show?-CodePudding

Hello I just created a Hide and Show jQuery effect - but when I click on one flip the other one automatically opens, I just want to on which one I clicked that one opens only not both. I hope you get my point, what I'm missing here??

$(document).ready(function() {
  $(".flip").click(function() {
    $(".panel").toggle();
  });
});

div.panel,
p.flip {
  line-height: 30px;
  margin: auto;
  font-size: 16px;
  padding: 5px;
  text-align: center;
  background: #555;
  border: solid 1px #666;
  color: #ffffff;
  border-radius: 3px;
  user-select: none
}

div.panel {
  display: none;
}

p.flip {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p >Click to show/hide panel</p>
<div  style="display: none;">
  <p>help</p>
  <p>need help</p>
</div>

<p >Click to show/hide panel</p>
<div  style="display: none;">
  <p>show</p>
  <p>hide</p>
</div>

CodePudding user response：

Give element the id. try this.

<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<meta charset="utf-8">
<script> 
function toggle(ID)
{
$('#'   ID).toggle();
}
</script>
<style type="text/css"> 
div.panel,p.flip
{
line-height: 30px;
margin:auto;
font-size:16px;
padding:5px;
text-align:center;
background:#555;
border:solid 1px #666;
color:#ffffff;
border-radius:3px;
user-select:none
}
div.panel
{
display:none;
}
p.flip
{
cursor:pointer;
}
</style>
</head>
<body>
<p  onclick="return toggle('panel1')">Click to show/hide panel</p>
<div id="panel1"  style="display: none;">
<p>help</p>
<p>need help</p>
</div>

<p  onclick="return toggle('panel2')">Click to show/hide panel</p>
<div id="panel2"  style="display: none;">
<p>show</p>
<p>hide</p>
</div>
</body>
</html>

CodePudding user response：

Since the panel elements are siblings of the flip elements and follow immediately after each flip just use next() to get the one after the clicked flip instance

$(".flip").click(function() {
  // `this` is the flip element that was clicked
  // and the panel you want is the `next()` after `this` 
  $(this).next(".panel").toggle();
});

div.panel,
p.flip {
  line-height: 30px;
  margin: auto;
  font-size: 16px;
  padding: 5px;
  text-align: center;
  background: #555;
  border: solid 1px #666;
  color: #ffffff;
  border-radius: 3px;
  user-select: none
}

div.panel {
  display: none;
}

p.flip {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p >Click to show/hide panel</p>
<div  style="display: none;">
  <p>help</p>
  <p>need help</p>
</div>

<p >Click to show/hide panel</p>
<div  style="display: none;">
  <p>show</p>
  <p>hide</p>
</div>

CodePudding user response：

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).next(".panel").toggle();
    });
});

div.panel,p.flip
{
line-height: 30px;
margin:auto;
font-size:16px;
padding:5px;
text-align:center;
background:#555;
border:solid 1px #666;
color:#ffffff;
border-radius:3px;
user-select:none
}
div.panel
{
display:none;
}
p.flip
{
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p >Click to show/hide panel</p>
<div  style="display: none;">
<p>help</p>
<p>need help</p>
</div>

<p >Click to show/hide panel</p>
<div  style="display: none;">
<p>show</p>
<p>hide</p>
</div>