Show Hide function in JavaScript

user_10303547 0
Viewed 92

I want to open and close these lists with a single javascript function.
I don't want to write more than one javascript function for each list.
How can I do? The above are my codes

$(document).ready(function(){
   $(".close").click(function(){
     $(".content").toggle("slow");
   });
 });
.close {padding:0 5px;margin-left:10px;cursor:pointer;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  Contents
  <span class="close">hide</span>
  <div  class="content">
    <ul>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
    </ul>
  </div>
</div>

<div>
  Contents
  <span class="close">hide</span>
  <div  class="content">
    <ul>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
    </ul>
  </div>
</div>

show-hide javascript
3 Answers

You can use jQuery function next() to toggle on your element which is next to the span (hide)

In jQuery $(this) refers to the element we have clicked on and then we get the next() element which is your .content class to toggle slow on that.

This way. You do have to write the code again and again.

Live Demo:

$(document).ready(function() {
  $(".close").click(function() {
    $(this).next().toggle("slow");
  });
});
.close {
  padding: 0 5px;
  margin-left: 10px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Contents<span class="close">hide</span>
  <div class="content">
    <ul>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
    </ul>
  </div>
</div>
<div>
  Contents<span class="close">hide</span>
  <div class="content">
    <ul>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
    </ul>
  </div>
</div>

user_136690480

In order for this to work separately for each list, there has to be some kind of unique identifier so jQuery knows which list it should close when it is clicked.

Try something like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    Contents<span class="close" data-target="#list-1">hide</span>
    <div  class="content" id="list-1">
        <ul>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
        </ul>
    </div>
</div>
<div>
    Contents<span class="close" data-target="list-2">hide</span>
    <div  class="content" id="list-2">
        <ul>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
        </ul>
    </div>
</div>

$(document).ready(function(){
  $(".close").click(function(){
    var closeBtn = $(this)
    $(closeBtn.data('target')).toggle("slow");
  });
});
user_30114310

I think you want your close spans to just toggle the div that they are related to, or? In that case you can modify your JS like

$(document).ready(function(){
  $(".close").click(function(){
    $(this).next(".content").toggle("slow");
  });
});
user_12914920
Related