Open a column of buttons when another button is clicked using HTML/JS and CSS?

Question

I have a row of 5 buttons which has been implemented in the fiddle below. I want to implement the code in the way that if i click on any button e.g. Water a list of specific button appears vertically.Similarly a list of buttons should appear for all the 5 buttons and at one time there should be only one list visible.

<div id="outer">
        <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;" >Water</button></div>
        
        <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Public</button></div>
        
        <div class="inner"><button class="msgBtn2">Transport</button></div>
        
          <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">House</button></div>
          
          
            <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Utilities</button></div>
            
    </div>

Here is the fiddle : http://jsfiddle.net/fku50o9v/

How can i do that? I tried implementeing it with OnClick but was unable to do so.

Using the editor you can actually create a runnable example without needing to link fiddle. It is the square icon with the <>. — Jeff B
– Jeff B, Commented Jun 1, 2021 at 15:37
@Bulent his JS is in the fiddle example, but edit queue is full so I can't make the edit =/ — Jeff B
– Jeff B, Commented Jun 1, 2021 at 15:43

allancoding · Accepted Answer · 2021-06-01 16:46:55Z

function popup(id){
if($("#"+id).hasClass( "vis" )){
   $("#"+id).removeClass( "vis" );
}else{
  $(".dropdown-content").removeClass( "vis" );
  $("#"+id).addClass( "vis" );
  }
}

#outer
{
    width:100%;
    text-align: center;
}
.inner
{
    display: inline-block;
    padding-right: 20px;
}

    
.msgBtn2{
    cursor: pointer;
    font-size: 1.2rem;
    height: 2.5rem;
    border: none;
    border-radius: 10px;
    color: blue;
    background-color: #ffff;
    outline: none;
    box-shadow: 0 0.3rem  rgba(121,121,121,0.70);
    
}
.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdown-content {
  min-width: 160px;
  top: 50px;
  margin-left: -40px;
  display: none;
  position: absolute;
  z-index: 1;
  color: red;
}
.dropdown-content button{
  color: red;
  margin: 5px
}

.vis {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
        <div class="inner">
        <div class="dropdown">
  <span><button class="msgBtn2" onclick="popup('water');" >Water</button></span>
  <div id="water" class="dropdown-content">
  <button type="submit" class="msgBtn2">Button One</button> 
  <button type="submit" class="msgBtn2">Button Two</button> 
  <button type="submit" class="msgBtn2">Button Three</button> 
  </div>
</div></div>
        
        <div class="inner">
        <div class="dropdown">
  <span><button class="msgBtn2" onClick="popup('public');" >Public</button></span>
  <div id="public" class="dropdown-content">
  <button type="submit" class="msgBtn2">Button One</button> 
  <button type="submit" class="msgBtn2">Button Two</button> 
  <button type="submit" class="msgBtn2">Button Three</button> 
  <button type="submit" class="msgBtn2">Other Button</button> 
  </div></div>
  </div>
        
        <div class="inner">
        <div class="dropdown">
  <span><button type="submit" class="msgBtn2" onClick="popup('transport');" >Transport</button></span>
  <div id="transport" class="dropdown-content">
  <button type="submit" class="msgBtn2">Button One</button> 
  <button type="submit" class="msgBtn2">Button Two</button> 
  <button type="submit" class="msgBtn2">Button Three</button> 
  <button type="submit" class="msgBtn2">Other Button</button> 
  </div></div></div>
        
        <div class="inner">
          <div class="dropdown">
  <span><button type="submit" class="msgBtn2" onClick="popup('house');" >House</button></span>
  <div id="house" class="dropdown-content">
  <button type="submit" class="msgBtn2">Button One</button> 
  <button type="submit" class="msgBtn2">Button Two</button> 
  <button type="submit" class="msgBtn2">Button Three</button> 
  <button type="submit" class="msgBtn2">Other Button</button> 
  </div></div></div>
          
        <div class="inner">
            <div class="dropdown">
  <span><button type="submit" class="msgBtn2" onClick="popup('utilities');" >Utilities</button></span>
  <div id="utilities" class="dropdown-content">
  <button type="submit" class="msgBtn2">Button One</button> 
  <button type="submit" class="msgBtn2">Button Two</button> 
  <button type="submit" class="msgBtn2">Button Three</button> 
  <button type="submit" class="msgBtn2">2 Other Button</button> 
  </div></div></div>
    </div>

Try this!

Collectives™ on Stack Overflow

Open a column of buttons when another button is clicked using HTML/JS and CSS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related