选择框-显示/不显示

Question

I have a page which allows users to comple one - three select boxes.

The first select box is shown on the page when it loads, then the user can click "Add filter 2/3/4"

See code below:

<div id="filter2"><a href="#">Add Filter 2</a></div>           
    <div id="filtertwo">           

      <label class="">Filter 2</label>
      <select class="full-width" data-placeholder="Select Filter" name="filter2" data-init-plugin="select2">

      <option value="test">Test</option>
      <option value="test1">Test1</option>
      </select>   

    <script>
        $(document).ready(
        function() {
            $("#filter2").click(function() {
                $("#filtertwo").toggle();
            });
        });

    </script>

    <style>
         #filtertwo {
        display: none;
    }
    </style>

The coding is the same for each of my select boxes. I would like to just show text "Add New Filter" only once, is this possible?

I have attached a screenshot so you can see my current page:

Answer 1

<div id="filter2"> <a id="filterLink" href="#"> Add New Filter </a> </div>

<script>
     $(document).ready(function(){
          $("#filter2").click(function() {
              $("#filtertwo").toggle();
              $("filterLink").hide();
              $("filter2").innerHTML = "<a id='filterLink' href='#'> Add Filter 2 </a>";
          });
     });
</script>

Now Repeat the code innerHTML how many time you want that link.

Answer 2

If i understand you properly. Consider following snippet:

$(document).ready(
    function() {
        $("#filter1,#filter2, #filter3").click(function() {
            $('.filter').hide();
            $(this).next('.filter').toggle();
        });
    });

DEMO

---

If you want to show only one filter link:

$(document).ready(
    function() {
        $(".filter-link").click(function() {
            $(".filter-link").hide();
            $(".filter-link").not(this).show();
            $('.filter').hide();
            $(this).next('.filter').toggle();
        });
    });

Updated DEMO