CODEWITHSUNDEEP
htmlcss
user1854914
user1854914

Reputation: 137

hiding content after being displayed using css js

I've manage to display a menu once i've click on an image. I then want the menu to hide again once the image2 is clicked. if anyone could help and explain how their method works that would be great! Here is the code:

<html>
<head>
<style> 
h3 {
font-size: 30px;
}
p {
    font-size: 20px;
}

.onclick-menu-content {
    position: fixed;
    top: -15px;
    bottom: -15px;
    left: 0px;
    right: 0px;

    background-color: #000000;
    opacity: 0;
}
.onclick-menu-content h3, p, a{
    color: #ffffff;
    text-align: center;
    }

.menu{
    position: fixed;
    top: 10px;
    left: 10px;

}
.menu2{
    position: fixed;
    top: 10px;
    left: 10px;

    }
</style>
</head>
<body>
<div class="main-content">
<img src="menu.png" class="menu" onclick="show(onclick-menu-content)">
<h3 style="color: #0000ff; text-align: center"> This is the main Content </h3>
    <div class="onclick-menu-content" >
        <img src="menu2.png" class="menu2" onclick="hide(onclick-menu-content)">
            <h3>Menu</h3>
            <p><a href="">Home</a><br />
            <br />
            <a href="">Services</a><br />
            <br />
            <a href="">About Us</a><br />
            <br />
            <a href="">Contact Us</a></p><br />
        </div>
   </div>

<script>
function show(id) {
    document.getElementById(id).style.display = 'block';
}

function hide(id) {
document.getElementById(id).style.display = 'none';
   }
</script>
</body>
</html>

So ive edited the code, but to use js, however this method doesnt work.

Upvotes: 2

Views: 216

Answers (2)

cнŝdk
cнŝdk

Reputation: 32145

Use these two Javascript functions:

function show() {
    document.getElementById("onclick-menu-content").style.display = 'block';
}

function hide() {
   document.getElementById("onclick-menu-content").style.display = 'none';
}

And your HTML should be like this:

<div tabindex="0" class="onclick-menu" onclick="show()">
<img src="menu2.png" class="menu2" onclick="hide()">

Upvotes: 0

Josh KG
Josh KG

Reputation: 5140

Your original solution was dependent on the menu image to have :focus in order to display the menu. This is not a great way to do it, because if the user tries to tab into the menu, focus is lost on the image and then the menu disappears.

Instead, use some javascript to show/hide your menu. I've done it in jQuery in my example below because I'm lazy, so it will require you to include the jQuery library.

Fiddle: http://jsfiddle.net/nxy9jkdx/1/

HTML:

<div tabindex="0" class="onclick-menu" >
    <img src="image.jpg" class="menu2">
    <div class="onclick-menu-content hidden">
         <h3>Menu</h3>

        <ul class="menu-list">
            <li><a href="">Home</a>
            </li>
            <li><a href="">Services</a>
            </li>
            <li><a href="">About Us</a>
            </li>
            <li><a href="">Contact Us</a>
            </li>
        </ul>
    </div>
</div>

CSS:

h3 {
    font-size: 30px;
}
p {
    font-size: 20px;
}
.onclick-menu {
    position: relative;

}
.onclick-menu-content {
    padding: 10px;
    top: -15px;
    bottom: -15px;
    left: 0px;
    right: 0px;
    background-color: #000000;
    transition: visibility 0.5s;
}
.onclick-menu-content h3, a {
    color: #ffffff;
    text-align: center;
}
.menu2 {
    /* image 2*/
    position: fixed;
    top: 10px;
    left: 10px;
}
.menu-list {
    margin: auto;
    padding: 0;
    text-align: center;
    list-style: none;
}
.hidden {
    display: none;
}

jQuery (you can place this inside the <head> or right above the close of the </body>) :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script>
    /* This tells jQuery not to run the code inside until the DOM is ready */

    $(document).ready( function () {

        $("img.menu2").on("click", function(){
            $(".onclick-menu-content").toggleClass("hidden");
        });

    });
</script>

Upvotes: 1

Related Questions