Separate Show/Hide button javascript

Question

I'm trying to have 2 separate buttons so that when the first button is clicked there's a div that shows underneath it and then when the other button is pressed, another div pops out replacing/hiding the first div that came out when the first button was clicked.

Html:

                                              <!-- Pre-Determined Button -->
            <span class="tooltip">
                   <button style="border-top-right-radius: 13px; border-bottom-left-radius: 13px;border-bottom-right-radius: 20px;border-top-left-radius: 20px;" id="predetermine" onclick="javascript:predetermine();">Pre-Determined</button>
            </span>

                                                 <!-- Auction Button -->
            <span class="tooltip">
                    <button style="border-top-right-radius: 20px; border-bottom-left-radius: 20px;border-bottom-right-radius: 13px;border-top-left-radius: 13px;" id="auction" onclick="javascript:auction(); ">Auction</button>
            </span>
                
            </div>
            <br>
            
            <!-- Username Entry -->
            <div class="username-entry" id="predetermineclick" style="visibility:hidden">
                <label> Enter Username: </label>
                <input  class= "joe" type="text" id="uName" name="UserName">
            </div>
            
            <!-- Create code button -->
            <div class="create" id="auctionclick" style="visibility:hidden">
                <button class="button">Create Link</button>
            </div>

For my javascript, I just wrote 2 seperate functions, but as you can see on the images the "create link" button goes on the bottom of the username spot. I know there's a way to put these 2 functions together and make the code cleaner.

Java script:

function predetermine() {
if (document.getElementById('predetermine').onclick) {
    document.getElementById('predetermineclick').style.visibility='visible';
    document.getElementById('auctionclick').style.visibility='hidden';
}

function auction() {
if (document.getElementById('auction').onclick) { 
    document.getElementById('auctionclick').style.visibility='visible';
    document.getElementById('predetermineclick').style.visibility='hidden';
}

`visibility: hidden` just visually hides the element, but it is still in the flow. Use `display: none` to hide it and remove it from the flow. (see [this stackoverflow answer](https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone)) — Jannes Carpentier, Aug 03 '20 at 19:26
Does this answer your question? [CSS: Hidden elements still take up space on printed output](https://stackoverflow.com/questions/3046311/css-hidden-elements-still-take-up-space-on-printed-output) — Heretic Monkey, Aug 03 '20 at 19:37
Just an advice, don't use inline style as it makes readbility and maintaining your code a big mess, and use shorthand rules in css, for example `border-radius: 20px 13px;` instead of `border-top-right-radius: 13px; border-bottom-left-radius: 13px;border-bottom-right-radius: 20px;border-top-left-radius: 20px;` — Saadi Toumi Fouad, Aug 03 '20 at 20:16

score 2 · Accepted Answer · answered Aug 03 '20 at 19:32

Use display: none to completely remove an element from the page.

function predetermine() {
  if (document.getElementById('predetermine').onclick) {
    document.getElementById('predetermineclick').style.display = 'block';
    document.getElementById('auctionclick').style.display = 'none';
  }
}

function auction() {
  if (document.getElementById('auction').onclick) {
    document.getElementById('auctionclick').style.display = 'block';
    document.getElementById('predetermineclick').style.display = 'none';
  }
}

<!-- Pre-Determined Button -->
<span class="tooltip">
  <button style="border-top-right-radius: 13px; border-bottom-left-radius: 13px;border-bottom-right-radius: 20px;border-top-left-radius: 20px;" id="predetermine" onclick="javascript:predetermine();">Pre-Determined</button>
</span>

<!-- Auction Button -->
<span class="tooltip">
  <button style="border-top-right-radius: 20px; border-bottom-left-radius: 20px;border-bottom-right-radius: 13px;border-top-left-radius: 13px;" id="auction" onclick="javascript:auction(); ">Auction</button>
</span>

<br>

<!-- Username Entry -->
<div class="username-entry" id="predetermineclick" style="display: none">
  <label> Enter Username: </label>
  <input class="joe" type="text" id="uName" name="UserName">
</div>

<!-- Create code button -->
<div class="create" id="auctionclick" style="display: none">
  <button class="button">Create Link</button>
</div>

Thank you so much for solving the problem! Sorry for the late response, but I appreciate the solution! — PayInCash, Aug 12 '20 at 17:37

Kartik Chauhan · Answer 2 · 2020-08-03T20:11:14.080

You can get the id of the clicked button by passing it in the javascript function. Try the code snippet below.

HTML:

<div>
    <!-- Pre-Determined Button -->
    <span class="tooltip">
        <button
            style="border-top-right-radius: 13px; border-bottom-left-radius: 13px;border-bottom-right-radius: 20px;border-top-left-radius: 20px;" id="predetermine" onclick="toggleState(this.id);">Pre-Determined</button>
    </span>

    <!-- Auction Button -->
    <span class="tooltip">
        <button
            style="border-top-right-radius: 20px; border-bottom-left-radius: 20px;border-bottom-right-radius: 13px;border-top-left-radius: 13px;" id="auction" onclick="toggleState(this.id); ">Auction</button>
    </span>

</div>
<br>

<!-- Username Entry -->
<div class="username-entry" id="predetermineclick" style="visibility:hidden">
    <label> Enter Username: </label>
    <input class="joe" type="text" id="uName" name="UserName">
</div>

<!-- Create code button -->
<div class="create" id="auctionclick" style="visibility:hidden">
    <button class="button">Create Link</button>
</div>

Javascript:

function toggleState(clickedButtonId) {
    const predetermineClick = document.getElementById('predetermineclick');
    const auctionClick = document.getElementById('auctionclick');
    
    if(clickedButtonId === 'predetermine') {
        predetermineClick.style.visibility='visible';
        auctionClick.style.visibility='hidden';
    } else {
        auctionClick.style.visibility='visible';
        predetermineClick.style.visibility='hidden';
    }
}

Another way of doing this is to pass the element itself instead of its id. To make this work, change toggleState(this.id); to toggleState(this); in both the places in the above HTML code.

Then get the id of the triggered element like we've done in the code below.

function toggleState(clickedButton) {
    const clickedButtonId = clickedButton.id;

    const predetermineStyle = document.getElementById('predetermineclick').style;
    const auctionStyle = document.getElementById('auctionclick').style;
    
    if(clickedButtonId === 'predetermine') {
        predetermineStyle.visibility = 'visible';
        auctionStyle.visibility = 'hidden';
    } else {
        auctionStyle.visibility = 'visible';
        predetermineStyle.visibility = 'hidden';
    }
}

Also, I noticed there was a <div> element missing in your HTML code, which I'm sure you'd definitely have in your code file, but to make this answer self-sufficient, I took the liberty of adding a <div> element at the beginning.

I'd have chosen to remove the element instead of toggling its visibility, but I see that @Janned has already addressed that in his answer, so I won't go into it.

Separate Show/Hide button javascript

2 Answers2