Restoring position of div on click

Could anyone please help me with a little JavaScript code as I am new to it. When I click the menu button, it drops down & the wrapper, which contains all the divs, too moves down to avoid overlapping. But I am unable to restore the position of wrapper on the next click to close the menu.

If you can post up the HTML, CSS & JavaScript that represents the problem, I’m sure we can give it a go.

2 Likes

As I am new to this community, I forgot to add html & css in my previous problem.

When I click menu button the menu drops down & the wrapper, all the content, too slides down.

But I am unable to restore the position of the wrapper on the next click of the button. Please help me with the code.

<!DOCTYPE html>

<html>

<head>

    <title> English Grammar Exercises </title>

</head>

<body>

    <div id='container'>

        <div id="header"> English Grammar Exercises </div>

        <div class="togglearea">

            <label for="toggle">

                <span> </span>
                <span> </span>
                <span> </span>


            </label>

        </div>

        <input type="checkbox" id="toggle">

        <div id="menu">

            <ul>

                <li> <a href="#"> Menu1 </a> </li>
                <li> <a href="#"> Menu2 </a> </li>
                <li> <a href="#"> Menu3 </a> </li>
                <li> <a href="#"> Menu4 </a> </li>
                <li> <a href="#"> Menu5 </a> </li>
                <li> <a href="#"> Menu6 </a> </li>
                <li> <a href="#"> Menu7 </a> </li>
                <li> <a href="#"> Menu8 </a> </li>
            </ul>

        </div>

        <div id="wrapper">

            <div id="image"> <img src="images/pic1.png" alt="image"> </div>

            <div id="text"> Grammar Exercises </div>

            <div id="section">

                <div id="index">

                    <ul>

                        <li> <a href="#"> Sentence1 </a> </li>
                        <li> <a href="#"> Sentence2 </a> </li>
                        <li> <a href="#"> Sentence3 </a> </li>
                        <li> <a href="#"> Sentence4 </a> </li>
                        <li> <a href="#"> Sentence5 </a> </li>
                        <li> <a href="#"> Sentence6 </a> </li>
                        <li> <a href="#"> Sentence7 </a> </li>
                        <li> <a href="#"> Sentence8 </a> </li>

                    </ul>

                 </div>

                <div id="content">
                    <p> Exercises for Board Examinations </p>

                    <div id=content-a>

                        <img src="images/set1.jpeg" alt="image1">
                        <img src="images/set2.jpeg" alt="image2">
                        <img src="images/set1.jpeg" alt="image3">

                    </div>

                    <div id="content-b">

                        <img src="images/set1.jpeg" alt="image4">
                        <img src="images/set2.jpeg" alt="image5">
                        <img src="images/set1.jpeg" alt="image6">

                    </div>

                </div>

            </div>

            <div id="footer"> </div>

        </div>

    </div>

</body>

</html>
html {

    background: #f7f1f1;

}

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: arial;

}

#container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;

}


#header {
    background: yellowgreen;
    width: 100%;
    height: 70px;
    text-align: center;
    padding: 15px 0;
    font-size: 35px;

}

#menu {
    width: 100%;
    height: 55px;
    background: green;
}


#menu ul {

    background: #d68b5c;
    display: flex;

}

#menu li {

    list-style: none;
    flex: 1 1 0;

}

#menu a {
    text-decoration: none;
    padding: 17px 25px;
    display: block;
    color: #77360e;
    text-align: center;
    border: 1px solid white;
    border-radius: 6px;
    transition: background 0.5s;

}

#menu a:hover {
    background: black;
    color: white;

}


#image {
    background: yellow;
    width: 1000px;
    height: 125px;

}

#section {
    display: flex;
    width: 100%;
    justify-content: center;


}

#index {

    background: yellowgreen;
    width: 330px;
    height: 1000px;

}

#index ul {
    width: 330px;
    height: 1000px;
    background: pink;
}


#index li {

    list-style: none;
}

#index a {

    text-decoration: none;
    font-size: 20px;
    color: green;
    padding: 10px 10px;
    display: block;
    text-align: center;
    border: 1px solid white;
    border-radius: 6px;
    transition: background 0.5s;

}

#index a:hover {
    background: black;
    color: white;
}

#content {
    background: orange;
    width: 670px;
    height: 1000px;

}

#content-a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    padding-top: 25px;

}

#content-b {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    padding-top: 20px;

}

#content p {
    text-align: center;
    font-size: 25px;
    padding-top: 15px;
    color: snow;

}

#footer {

    background: gray;
    width: 100%;
    height: 200px;
    margin: 0;
    padding: 0;

}

#text {
    visibility: hidden;

}

#toggle {
    display: none;

}

.togglearea {
    background: #e8c399;
    border-bottom: 2px solid black;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.togglearea label {
    background: #392b16;
    width: 40px;
    height: 35px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.togglearea label span {
    background-color: white;
    height: 3px;
    width: 20px;
    margin: 3px 0;

}

.togglearea {
    display: none;

}




/* Media Queries for Tablet */
@media screen and (max-width: 700px) {

    #header {
        width: 100%;
        height: 60px;
        padding: 12px 0;
        font-size: 25px;

    }

    #menu {
        width: 100%;
        height: 40px;

    }


    #menu a {
        padding: 10px 15px;
    }

    #image {

        width: 700px;
        height: 120px;
    }

    #image img {
        width: 700px;
        height: 120px;

    }

    #index {

        width: 250px;
        height: 1100px;
        position: relative;
        top: -18px;

    }

    #index ul {
        width: 250px;
        height: 1100px;


    }

        #index a {
        font-size: 18px;
        padding: 10px 10px;

    }

    #content {
        width: 400px;
        height: 1100px;
        margin-top: -17px;
    }

    #content-a {
        margin-top: -10px;

    }

    #content-a img {

        width: 170px;
        height: 100px;
        padding-top: 15px;

    }

    #content-b {
        margin-top: -10px;

    }

    #content-b img {

        width: 170px;
        height: 100px;
        padding-top: 15px;
    }

    #content p {
        font-size: 22px;

    }

}



/* Media Queries for Mobile */

@media screen and (max-width: 375px) {

    body {
        margin: 0;
        padding: 0;

    }

    #container {
        margin: 0;
        padding: 0;

    }

    #header {

        width: 0;
        height: 0;
        display: none;

    }


    #menu {
        width: 375px;
        height: 0px;
        z-index: 1;

    }

    #menu ul {

        flex-direction: column;
        width: 375px;

    }

    #image {

        width: 375px;
        height: 120px;


    }

    #image img {

        width: 375px;
        height: 120px;

    }

    #text {
        visibility: visible;
        display: flex;
        width: 375px;
        height: 65px;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: red;
        padding-bottom: 15px;

    }

    #section {
        flex-direction: column;
        width: 375px;
        height: 100%;


    }

    #index {
        width: 375px;
        height: 100%;
    }

    #index ul {
        width: 375px;
        background: pink;
        padding: 0 5px;
    }



    #content {
        width: 375px;
        height: 100%;

    }

    #content img {
        width: 320px;
        height: 170px;
        padding-top: 15px;

    }

    #footer {

        width: 375px;
        height: 200px;

    }

       #content p {
        font-size: 20px;

    }

    #header {
        display: none;
    }


    .togglearea {
        display: flex;
    }

    #menu {
        display: none;

    }

    #wrapper {
        position: relative;

    }

}


$('document').ready(function () {

    $('#toggle').click(function () {

        $('#menu').fadeToggle(500);

        $('#wrapper').animate({
            top: '320px'
        });

    });

});

It would be better if you just used slideToggle and avoid magic numbers like 320px.

Change the css in your smaller media query to the following for #menu.

    #menu {
        width: 375px;
        height: 0px;/* change to auto */
		height:auto;
        z-index: 1;
		opacity:0;
		transition:opacity .5s  ease;
    }
	#menu.fade{opacity:1}

Then the JS becomes simpler.

<script>
$('document').ready(function () {
    $('#toggle').click(function () {
        $('#menu').slideToggle(500).toggleClass('fade');
    });
});
</script>

However you will need to add a min-width media query as the JS writes into the style attribute and that would need ot be over-ridden with !important. You would need to do this:

@media screen and (min-width:376px){
	#menu{opacity:1;display:block!important;}
}

I note that you are only going to a hamburger at 375px width but your menu breaks long before then.

Also do not give heights to your columns as that is a big mistake. Avoid fixed heights on fluid content because it just won’t work. Most of the time you don’t really need a height anyway.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.