hiding content after being displayed using css js

Question

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.

Can you give your JavaScript that is handling the "show" feature? — Josh KG
– Josh KG, Commented Oct 30, 2014 at 16:14
Im not using any javascript. All the code im using is as shows above. — user1854914
– user1854914, Commented Oct 30, 2014 at 16:16
Oh I see. I've never seen this approach before, showing/hiding based solely on :focus -- its fairly brittle, what happens when the keyboard user tries to tab into the menu items? Focus is lost and the menu disappears. — Josh KG
– Josh KG, Commented Oct 30, 2014 at 16:38
Ive amended the code to use javascript as it seems more beneficial to do so. however my javascript knowledge isnt great and using the help from chsdk the function still doesnt work...:/ — user1854914
– user1854914, Commented Oct 30, 2014 at 16:49
I've just edited the code and the script tag is better placed in the head tag rather than the body. — cнŝdk
– cнŝdk, Commented Oct 30, 2014 at 19:57

Josh KG · Accepted Answer · 2014-10-30 18:26:32Z

1

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>

edited Oct 30, 2014 at 18:26

answered Oct 30, 2014 at 17:00

Josh KG

5,1503 gold badges23 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1854914 Over a year ago

I see it works on jsfiddle. however ive put the code into notepad++ and trying to test it via: run -> launch in chrome and it displays the image and doesnt function when clicked :S

Josh KG Over a year ago

Add your jQuery library: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

user1854914 Over a year ago

Ive added it but still not functioning. Sorry im new to this

Josh KG Over a year ago

Okay make sure your library call is ABOVE your actual jQuery, and then wrap your jQuery inside a $(document).ready. I'll update my answer to demonstrate.

user1854914 Over a year ago

I think its not working, due to im trying to run it through notepad++

cнŝdk · Accepted Answer · 2015-06-09 09:12:16Z

0

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()">

edited Jun 9, 2015 at 9:12

answered Oct 30, 2014 at 16:23

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

6 Comments

cнŝdk Over a year ago

Normally it works fine I am using it with bouttons but I think it's the same thing.

user1854914 Over a year ago

Ive amended the code (see above). can you tell me where ive gone wrong?

Josh KG Over a year ago

the image is a child of the div so you're firing both these functions when you click the image.

user1854914 Over a year ago

Im not really sure what you mean

user663031 Over a year ago

Not getting what show(onclick-menu-content) is going to do other than cause a syntax error.

|

Collectives™ on Stack Overflow

hiding content after being displayed using css js

2 Answers 2

5 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related