How can one hide / show an input-group in Bootstrap

I’m trying to hide / show a Bootstrap 5 input-group as shown here:

However, once hidden, the input group no longer shows correctly when shown again. How can this functionality be properly implemented?

function dotoggle() {
  elem = document.getElementById("hideme")
  if ( == "none") { = "block";
  } else { = "none";
<link rel="stylesheet" href="">

<script src=""></script>

<div class="input-group mb-3" id="hideme">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">

<button onclick="dotoggle()">

20 thoughts on “How can one hide / show an input-group in Bootstrap”

  1. I believe what you said was very reasonable. But,
    what about this? suppose you wrote a catchier post title?
    I ain’t saying your content isn’t good, however suppose you added a post title that makes people want more?
    I mean How can one hide / show an input-group in Bootstrap – JavaScript Help is a little boring.
    You could look at Yahoo’s home page and see how they create article headlines to
    get viewers to open the links. You might try adding
    a video or a related pic or two to get people interested about what you’ve written. In my
    opinion, it might make your posts a little livelier.


Leave a Comment