Search code examples
javascripthtmlcssshow-hide

show and hide div change position depending on the order its corresponding buttons are clicked

I appreciate if anyone could help (I am fairly new to code so pardon the syntax).

But what I am looking is for two buttons (button A and button B) to hide and show its corresponding divs (div A and div B) which operate individually. The divs will appear taking up 50% of screen width and depending on the order they are clicked will determine their position. First click (regardless if its button A or button B) will appear 50% width right of screen and second click (again regardless if button A or button B) will appear 50% width left of screen.

diagram to illustrate problem

I was able to create a show and hide div but wouldn't know how to determine their position depending on the order their corresponding buttons are clicked...

Solution

  • I associated both buttons with a class, so I could query the buttons together. Then I made a data-id to reference each button / div. Then I queried both buttons and added a click event. Grabbing the data-id to differentiate the buttons, then I queried the columns. if the data-id's match then I display the div and display it after the next button pressed, so whichever button you press will be first. Then I added a class called show to differentiate whether or not it was showing, like a toggle. If the toggle class is show, I hide it, otherwise I show it / remove the class toggle. If the buttons don't match by data-id, then I put it before the other div, to make sure the div is always before the other when clicked in sequence.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .columns{
                width:50%;
                height:100%;
            }
            body , html{
                height:100%;
            }
            span{
                margin-top:50%; margin-bottom:50%;
            }
            .columns div{
                position:relative;
                top:50%;
                color:white;
            }
        </style>
    </head>
    <body>
        <button class="buttons" data-id="buttonA">Button A</button>
        <button class="buttons" data-id="buttonB">Button B</button>
    
    <div style="height:50%; display:flex;">
        <div class="columns" data-id="buttonA" style="background-color:green; text-align:center; position:relative; display:none;">
    <div>div a</div>
        </div>
        <div class="columns" data-id="buttonB" style="background-color:red; text-align:center; position:relative; display:none;">
    <div>div b</div>
        </div>
    </div>
    <script>
        let buttons=document.querySelectorAll('.buttons')
        for (let i = 0; i < buttons.length; i++) {
            
        
        buttons[i].addEventListener('click',function (params) {
    
            let button = params.target.getAttribute('data-id');
            let divs = document.querySelectorAll('.columns');
            for (let index = 0; index < divs.length; index++) {
                
                if (button==divs[index].getAttribute('data-id')){
                    divs[index].style.display="Block"
                    divs[index].after(divs[divs.length-1])
                    if (divs[index].classList.contains('show')){
                    divs[index].classList.remove('class','show');
                    divs[index].style.display = "none"
                    }
                    else{
                    divs[index].classList.add('show')
                    divs[index].style.display="Block"
                    }
                }else {
                    divs[index].before(divs[divs.length-1])
                }
                
                
            }
        })
    }
    </script>
    </body>
    </html>