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

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

https://jsfiddle.net/o08r3p9u

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 (elem.style.display == "none") {
    elem.style.display = "block";
  } else {
    elem.style.display = "none";
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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">
</div>

<button onclick="dotoggle()">
BUTTON
</button>

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. http://herreramedical.org/azithromycin

    Reply

Leave a Comment