'Expanding animation on click

I'm facing a problem right know about css & javascript animations, let me explain, I have two columns with a box of information and a button to "see more" on each one. What I want to do is to expand 1 column when I click the button, taking the fullwidth of the viewport and making the other column to hide under the column that expands, then, when the columns is opened, I want to display a closing button to shrink the column and being able to see both columns again, but I think I can take over the closing button.

I will attach an image where you can visualize my problem.

By the way, I'm working with Wordpress and elementor, but I asume I will need code to do this, it's a great opportunity to learn!

Thanks to everybody and have a nice day!

Blockquote

let buttonInsolite = document.querySelector(".button-insolite");

let buttonAttribute = document.querySelector(".button-attribute")

let containerInsolite = document.querySelector(".container-insolite-1");

let containerAttribute = document.querySelector(".container-attribute-1");

let sectionInsolite = document.querySelector(".section-insolite-2");

let sectionAttribute = document.querySelector(".section-attribute-2");

let closeInsolite = document.querySelector(".close-insolite");

let closeAttribute = document.querySelector(".close-attribute");

buttonInsolite.addEventListener("click", function() {
    containerAttribute.style.display = "none";
    sectionInsolite.style.display = "block";
    closeInsolite.style.display = "block";
    closeInsolite.addEventListener("click", function() {
        containerAttribute.style.display = "block";
        sectionInsolite.style.display = "none";
        closeInsolite.style.display = "none";
    })
})

buttonAttribute.addEventListener("click", function() {
    containerInsolite.style.display = "none";
    sectionAttribute.style.display = "block";
    closeAttribute.style.display = "block";
    closeAttribute.addEventListener("click", function() {
        containerInsolite.style.display = "block";
        sectionAttribute.style.display = "none";
        closeAttribute.style.display = "none";
    })
})

.container {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.container-insolite-1 {
    position: relative;
    display: flex;
    background: #9C030333;
    margin-right: 10px;
    padding: 50px 0px;
    flex: 1 1 0px;
}

.container-insolite-2 {
    display: flex;
}

.section-insolite-1 {
    padding: 0px 50px;
    flex: 1 1 0px;
}

.section-insolite-2 {
    display: none;
    padding: 0px 50px;
    border-left: 1px solid black;
    flex: 1 1 0px;
}

.close-insolite {
    display: none;
    position: absolute;
    right: 0px;
    top: 0px;
}

.container-attribute-1 {
    position: relative;
    display: flex;
    background: #E6E6E6;
    margin-left: 10px;
    padding: 50px 0px;
    flex: 1 1 0px;
}

.container-attribute-2 {
    display: flex;
}

.section-attribute-1 {
    padding: 0px 50px;
    flex: 1 1 0px;
}

.section-attribute-2 {
    display: none;
    padding: 0px 50px;
    border-right: 1px solid black;
    flex: 1 1 0px;
}

.close-attribute {
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
}

<div class="container">
    <div class="container-insolite-1">
        <button class="close-insolite">X</button>
        <div class="section-insolite-1">
            <h3>INSOLITE</h3>
            <p>Empresa de IT</p>
            <p>Somos una empresa de IT que trabaja para ayudar a progresar a los negocios haciendo humana la tecnología.</p>
            <br>
            <button class="button-insolite">Servicios de INSOLITE</button>
        </div>
        <div class="section-insolite-2">
            <p><strong>Servicios de INSOLITE</strong></p>
            <div class="container-insolite-2">
                <div>
                    <p><strong>Development</strong></p>
                    <p>Webpages</p>
                    <p>App</p>
                </div>
                <div>
                    <p><strong>Cloud</strong></p>
                    <p>Infrastructures</p>
                    <p>Digital Wordspace</p>
                </div>
                <div>
                    <p><strong>Business Value</strong></p>
                    <p>Analytics & Business Intelligence</p>
                    <p>Product & Service Creation (alongside ATTRIBUTE)</p>
                </div>
            </div>
        </div>
    </div>
    <div class="container-attribute-1">
        <button class="close-attribute">X</button>
        <div class="section-attribute-2">
            <p><strong>Servicios de ATTRIBUTE</strong></p>
            <div class="container-attribute-2">
                <div>
                    <p><strong>Brand Building</strong></p>
                    <p>Brand Strategy</p>
                    <p>Verbal Identity</p>
                    <p>Visual Identity</p>
                </div>
                <div>
                    <p><strong>Experience</strong></p>
                    <p>Customer Experience</p>
                    <p>Business Design</p>
                    <p>Service Design</p>
                </div>
                <div>
                    <p><strong>Activation</strong></p>
                    <p>Product & Service Creation</p>
                    <p>Go-to-market</p>
                </div>
            </div>
        </div>
        <div class="section-attribute-1">
            <h3>ATTRIBUTE</h3>
            <p>Business Transformation Consultants</p>
            <p>Somos una consultora de transformación de negocio que entiende la marca como el eje estratégico de nuestro trabajo.</p>
            <br>
            <button class="button-attribute">Servicios de ATTRIBUTE</button>
        </div>
    </div>
</div>

Solution 1:^[1]

Just a quick example for you. I have replaced .display = "none"; with .fadeOut(500); and .display = "block"; with .fadeIn(500);

You could also try and do some stuff with .animate():

.animate({
    width: "toggle" // or use 500px / vw / % what every you like and need.
});

?? https://jquery.com/

let buttonInsolite = document.querySelector(".button-insolite");

let buttonAttribute = document.querySelector(".button-attribute")

let containerInsolite = document.querySelector(".container-insolite-1");

let containerAttribute = document.querySelector(".container-attribute-1");

let sectionInsolite = document.querySelector(".section-insolite-2");

let sectionAttribute = document.querySelector(".section-attribute-2");

let closeInsolite = document.querySelector(".close-insolite");

let closeAttribute = document.querySelector(".close-attribute");

buttonInsolite.addEventListener("click", function() {
    //containerAttribute.style.display = "none";
    $(".container-attribute-1").fadeOut(500);
    //sectionInsolite.style.display = "block";
    $(".section-insolite-2").fadeIn(500);
    closeInsolite.style.display = "block";
    closeInsolite.addEventListener("click", function() {
        //containerAttribute.style.display = "block";
        $(".container-attribute-1").fadeIn(500);
        //sectionInsolite.style.display = "none";
        $(".section-insolite-2").fadeOut(500);
        closeInsolite.style.display = "none";
    })
})

buttonAttribute.addEventListener("click", function() {
    containerInsolite.style.display = "none";
    sectionAttribute.style.display = "block";
    closeAttribute.style.display = "block";
    closeAttribute.addEventListener("click", function() {
        containerInsolite.style.display = "block";
        sectionAttribute.style.display = "none";
        closeAttribute.style.display = "none";
    })
})

.container {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.container-insolite-1 {
    position: relative;
    display: flex;
    background: #9C030333;
    margin-right: 10px;
    padding: 50px 0px;
    flex: 1 1 0px;
}

.container-insolite-2 {
    display: flex;
}

.section-insolite-1 {
    padding: 0px 50px;
    flex: 1 1 0px;
}

.section-insolite-2 {
    display: none;
    padding: 0px 50px;
    border-left: 1px solid black;
    flex: 1 1 0px;
}

.close-insolite {
    display: none;
    position: absolute;
    right: 0px;
    top: 0px;
}

.container-attribute-1 {
    position: relative;
    display: flex;
    background: #E6E6E6;
    margin-left: 10px;
    padding: 50px 0px;
    flex: 1 1 0px;
}

.container-attribute-2 {
    display: flex;
}

.section-attribute-1 {
    padding: 0px 50px;
    flex: 1 1 0px;
}

.section-attribute-2 {
    display: none;
    padding: 0px 50px;
    border-right: 1px solid black;
    flex: 1 1 0px;
}

.close-attribute {
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="container-insolite-1">
        <button class="close-insolite">X</button>
        <div class="section-insolite-1">
            <h3>INSOLITE</h3>
            <p>Empresa de IT</p>
            <p>Somos una empresa de IT que trabaja para ayudar a progresar a los negocios haciendo humana la tecnología.</p>
            <br>
            <button class="button-insolite">Servicios de INSOLITE</button>
        </div>
        <div class="section-insolite-2">
            <p><strong>Servicios de INSOLITE</strong></p>
            <div class="container-insolite-2">
                <div>
                    <p><strong>Development</strong></p>
                    <p>Webpages</p>
                    <p>App</p>
                </div>
                <div>
                    <p><strong>Cloud</strong></p>
                    <p>Infrastructures</p>
                    <p>Digital Wordspace</p>
                </div>
                <div>
                    <p><strong>Business Value</strong></p>
                    <p>Analytics & Business Intelligence</p>
                    <p>Product & Service Creation (alongside ATTRIBUTE)</p>
                </div>
            </div>
        </div>
    </div>
    <div class="container-attribute-1">
        <button class="close-attribute">X</button>
        <div class="section-attribute-2">
            <p><strong>Servicios de ATTRIBUTE</strong></p>
            <div class="container-attribute-2">
                <div>
                    <p><strong>Brand Building</strong></p>
                    <p>Brand Strategy</p>
                    <p>Verbal Identity</p>
                    <p>Visual Identity</p>
                </div>
                <div>
                    <p><strong>Experience</strong></p>
                    <p>Customer Experience</p>
                    <p>Business Design</p>
                    <p>Service Design</p>
                </div>
                <div>
                    <p><strong>Activation</strong></p>
                    <p>Product & Service Creation</p>
                    <p>Go-to-market</p>
                </div>
            </div>
        </div>
        <div class="section-attribute-1">
            <h3>ATTRIBUTE</h3>
            <p>Business Transformation Consultants</p>
            <p>Somos una consultora de transformación de negocio que entiende la marca como el eje estratégico de nuestro trabajo.</p>
            <br>
            <button class="button-attribute">Servicios de ATTRIBUTE</button>
        </div>
    </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Kip

'Expanding animation on click

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]