The display and concealment of a div will shift positions based on the sequence in which its associated buttons are clicked

Question

The display and concealment of a div will shift positions based on the sequence in which its associated buttons are clicked

I am in need of assistance with coding (I am still learning, so please excuse any syntax errors).

What I am trying to achieve is having two buttons (button A and button B) that can toggle the visibility of their respective divs (div A and div B), which should function independently. These divs will each take up 50% of the screen width, and depending on the order in which they are clicked, their position should be determined. The first click (whether it's on button A or button B) should display the div 50% width from the right edge of the screen, while the second click (again, regardless of the button) will place the div 50% width from the left edge of the screen.

https://i.sstatic.net/KwGP5.png

I have managed to create a show and hide functionality for the divs, but I'm unsure how to control their positioning based on the order in which their corresponding buttons are clicked...

javascript html css show-hide

Answer 1

Answer №1

To streamline the button functionalities, I assigned a common class to both buttons for easy querying. Each button was then given a unique data-id attribute to distinguish between them. By setting up a click event listener on both buttons, I could capture the data-id of the clicked button and compare it with the columns. If there was a match, the corresponding div would be displayed and toggled based on its current visibility status.

<!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>

Answer 2

To streamline the button functionalities, I assigned a common class to both buttons for easy querying. Each button was then given a unique data-id attribute to distinguish between them. By setting up a click event listener on both buttons, I could capture the data-id of the clicked button and compare it with the columns. If there was a match, the corresponding div would be displayed and toggled based on its current visibility status.

<!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>

The display and concealment of a div will shift positions based on the sequence in which its associated buttons are clicked

Answer №1

Similar questions

Revise the if statement by using variables

What is the process for extracting the differences between two or three files and merging them together in Node.js?

In what situations should the `#` symbol be used to select a DOM element?

When passing context to createPage for use in a query, there may be issues if a string is inadvertently converted to a number, causing the query to fail

The div element disappears upon calling the load() function

The div that scrolls gracefully within its boundaries

Leveraging the ReactJS Hook useState for detecting Key press events

Searching for values in an array using the $elemMatch operator in MongoDB 2.6 without the need for the $eq operator

Discover the magic of Material UI's Multiple Select feature for working with arrays

Is it possible to verify the absence of an error icon when valid data is provided in Angular testing?

How to customize the background of radio buttons in HTML

Is there a way to modify or update the CSS classes and overall styling in .gsp files within the Grails framework?

Is there a way to link the scrolling of two ag-grid data tables together for synchronized movement?

Retrieving the values of multiple selected options from various select fields simultaneously

Maintain the flow of a floated or absolutely positioned element using CSS

Notification of failed fetch in backbone

"Include the 'unsafe' prefix at the start of the URL in AngularJS

Is there a way to remove the scrollbar from the menu created with react-burger-menu?

Mobile-style menu with full desktop height

Is the state mutated when using the .map() function to update it?