按钮onClick事件

Question

For a study Project I try to make a sidebar for an interactive map.

I have a button which trigger an onClick() Event which Shows a <ul> with an form Input.

So far I have 3 questions.

1) Can I check if the button was already clicked so I can hide my additional Content again? If so, how can I achieve that?

2) At the Moment I only display the content but I would like to have an Animation. Again, you may give me some Infos to do this or provide an link / tutorial.

3) Is there a better Solution for my Problem, if so. May you give me a hint?

 function showDropdown(x) { let id = x; if (id == 1) { document.getElementById("1").style.display = "block"; console.log(id); } if (id == 2) { document.getElementById("2").style.display = "block"; console.log(id); } if (id == 3) { document.getElementById("3").style.display = "block"; console.log(id); } else { console.log(id); } } 

 .nav-sidebar>ul { display: none; } 

 <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <div class="nav nav-sidebar"> <button type="button" onclick="showDropdown(1)" class="dropdown-header">Einwohner</button> <ul class="dropdown-item" id="1"> <li> <p>Feld 1:<span style="padding-left: 10px;"><input type="text" Placeholder="a" size="2"</span></p> </li> <li> <p>Feld 2:<span style="padding-left: 10px;"><input type="text" Placeholder="b" size="2"</span></p> </li> <li> <p>Feld 3:<span style="padding-left: 10px;"><input type="text" Placeholder="c" size="2"</span></p> </li> </ul> </div> </div> 

Answer 1

You put jQuery in the tags, so I suppose you could use it, see this fiddle

You can use toggle() or slideToggle() function to show/hide the content.

$('button').click(function(){
    $('.dropdown-item').slideToggle();
});

Answer 2

You can achieve all of this using jQuery's .slideToggle() function.

function showDropdown(x) {
  let id = x;

  if (id == 1) {
    $("#1").slideToggle();
    console.log(id);
  }

  if (id == 2) {
     $("#2").slideToggle();
    console.log(id);
  }

  if (id == 3) {
    $("#3").slideToggle();
    console.log(id);
  } else {
    console.log(id);
  }
}

By using slideToggle you are checking to see what the current state is, toggling it to the opposite state and it will also animate.

Edit; Another user has beat me to it.

Answer 3

Use a data attribute and jQuery slidetoggle as I suggested in my comment.

Please note I do not like numeric IDs so I prefixed the ID with a u.

 $(function() { $(".dropdown-header").on("click", function() { var id = $(this).attr("data-id"); $("#" + id).slideToggle() console.log(id); }); }); 

 .nav-sidebar>ul { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <div class="nav nav-sidebar"> <button type="button" data-id="u1" class="dropdown-header">Einwohner</button> <ul class="dropdown-item" id="u1"> <li> <p>Feld 1:&nbsp;<input type="text" Placeholder="a" size="2" /></p> </li> <li> <p>Feld 2:&nbsp;<input type="text" Placeholder="b" size="2" /></p> </li> <li> <p>Feld 3:&nbsp;<input type="text" Placeholder="c" size="2" /></p> </li> </ul> </div> </div> 

Answer 4

1- Check if button is clicked.

You can do this by assigning a variable i=0 outside, and when you perform onClick operation makeit i=1, and before you perform onclick operations, check if the value is 1 or 0.

But there is another way of doing it using jquery.

Hide and show elements using jquery

If you want to do it in little animation way. use fade function in Jquery

Hide and show elements using fade()

if you want tutorial on side navigation bar

W3schools sidenav tutorial