Expandable Menu Issue


#1

What is the error in this menu . It's not expandable even I enter correct details to my knowledge. Please tell me.

HTML is:

<div id="ulMenuList" class="urbangreymenu">
<h3 class="headerbar"><a title="About Us">About Us</a></h3>
<ul class="submenu">
<li><a href="#" title="Organization">Organization</a></li>
<li><a href="#" title="Management team">Management team</a></li>
</ul>
<h3 class="headerbar"><a title="Commercial Information">Commercial Information</a></h3>
<ul class="submenu">
<li><a href="#" title="Applicable Policies">Applicable Policies</a></li>
</ul>
<h3 class="headerbar"><a title="Tariff Regulations">Tariff Regulations</a></h3>
<ul class="submenu">
<li><a href="#" title="Tariff Regulations">Tariff Regulations</a></li>
</ul>
</div>

CSS CODE:

 
        .urbangreymenu
        {
            font-family: Verdana;
            font-size: 11px;
            margin: 0;
            margin: 0 0 0 0px;
            width: 200px;
        }
        
        
      
        
        .urbangreymenu .headerbar
        {
            margin-bottom: 0px;
            margin-top: 3px; /* text-transform: uppercase; */
            padding: 0 0 0 0;
        }
        .urbangreymenu ul
        {
            padding: 0;
            margin: 0;
            list-style-type: none;
            margin-bottom: 0px;
            padding: 0px 0 0px 0;
        }
        .urbangreymenu ul li
        {
            width: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px #d2dbea solid;
            padding: 2px 0 2px 0;
            font-weight: normal;
        }
        .urbangreymenu ul li a, ul li a:visited
        {
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
        }
        .urbangreymenu ul li
        {
            border-left: 20px solid #69c;
            width: 150px;
            margin-bottom: 0;
        }
        .urbangreymenu ul li a
        {
            display: block;
            color: #369;
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
            width: 170px;
        }
        .urbangreymenu ul li a:hover
        {
            display: block;
            color: #369;
            background-color: #eee;
            padding: 3px 0 3px 8px;
            font-size: 10px;
        }
        .urbangreymenu li
        {
            list-style-type: none;
        }
        .urbangreymenu h2
        {
            margin-top: 1.5em;
        }
        
        .urbangreymenu h3.headerbar
        {
            font-size: 10px;
        }
        /* Header links styling */
        .urbangreymenu h3.headerbar a
        {
            color: Navy;
            display: block; /*border-top: 1px solid #36a;
		border-right: 1px solid #36a;*/
            background: #ddd url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            padding: 5px 6px;
            text-decoration: none;
        }
        .urbangreymenu h3.headerbar a:hover
        {
            color: #ff0000;
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            border-left: 20px solid #69c;
        }
        .urbangreymenu h3.selected a
        {
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            color: #fff;
            border-left: 20px solid #69c; /*padding: 3px 6px;*/
        }
        .urbangreymenu h3.selected a:hover
        {
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%; /*color: #36a;*/
            color: #fff;
            border-left: 20px solid #69c;
        }

JS

$(function(){

  $(".urbangreymenu h3").click(function(){
  $(".urbangreymenu ul").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown();
    }
  
  
  });
  

});

How to create this menu
#2

It looks like you're missing a fullstop.

// $("urbangreymenu h3").click(function(){
$(".urbangreymenu h3").click(function(){

#3

Nog working ..


#4

That's odd, it works for me. https://jsfiddle.net/h30gd9mo/


#5

Yes, I visit your link and see it's work but why it not run on https://htmledit.squarefree.com. looks like it my mistake about I don't know what I edit before entering JavaScript code. Means that,
What is that tag before

<script>$(function(){
  $(".urbangreymenu h3").click(function(){
  $(".urbangreymenu ul").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown();
    }
  });
});</script>

#6

I am editing like this:

<script>$(function(){
  $(".urbangreymenu h3").click(function(){
  $(".urbangreymenu ul").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown();
    }
  });
});</script><style>.urbangreymenu
        {
            font-family: Verdana;
            font-size: 11px;
            margin: 0;
            margin: 0 0 0 0px;
            width: 200px;
        }
        
        
      
        
        .urbangreymenu .headerbar
        {
            margin-bottom: 0px;
            margin-top: 3px; /* text-transform: uppercase; */
            padding: 0 0 0 0;
        }
        .urbangreymenu ul
        {
            padding: 0;
            margin: 0;
            list-style-type: none;
            margin-bottom: 0px;
            padding: 0px 0 0px 0;
        }
        .urbangreymenu ul li
        {
            width: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px #d2dbea solid;
            padding: 2px 0 2px 0;
            font-weight: normal;
        }
        .urbangreymenu ul li a, ul li a:visited
        {
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
        }
        .urbangreymenu ul li
        {
            border-left: 20px solid #69c;
            width: 150px;
            margin-bottom: 0;
        }
        .urbangreymenu ul li a
        {
            display: block;
            color: #369;
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
            width: 170px;
        }
        .urbangreymenu ul li a:hover
        {
            display: block;
            color: #369;
            background-color: #eee;
            padding: 3px 0 3px 8px;
            font-size: 10px;
        }
        .urbangreymenu li
        {
            list-style-type: none;
        }
        .urbangreymenu h2
        {
            margin-top: 1.5em;
        }
        
        .urbangreymenu h3.headerbar
        {
            font-size: 10px;
        }
        /* Header links styling */
        .urbangreymenu h3.headerbar a
        {
            color: Navy;
            display: block; /*border-top: 1px solid #36a;
		border-right: 1px solid #36a;*/
            background: #ddd url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            padding: 5px 6px;
            text-decoration: none;
        }
        .urbangreymenu h3.headerbar a:hover
        {
            color: #ff0000;
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            border-left: 20px solid #69c;
        }
        .urbangreymenu h3.selected a
        {
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            color: #fff;
            border-left: 20px solid #69c; /*padding: 3px 6px;*/
        }
        .urbangreymenu h3.selected a:hover
        {
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%; /*color: #36a;*/
            color: #fff;
            border-left: 20px solid #69c;
        }</style><div id="ulMenuList" class="urbangreymenu">
<h3 class="headerbar"><a title="About Us">About Us</a></h3>
<ul class="submenu">
<li><a href="#" title="Organization">Organization</a></li>
<li><a href="#" title="Management team">Management team</a></li>
</ul>
<h3 class="headerbar"><a title="Commercial Information">Commercial Information</a></h3>
<ul class="submenu">
<li><a href="#" title="Applicable Policies">Applicable Policies</a></li>
</ul>
<h3 class="headerbar"><a title="Tariff Regulations">Tariff Regulations</a></h3>
<ul class="submenu">
<li><a href="#" title="Tariff Regulations">Tariff Regulations</a></li>
</ul>
</div>

Could make it correct and send me pls. By copy past..


#7

What error messages do you see in your browser's dev tools console?


#8

Are you including the jQuery library? That's required for the scripting code that you have there.


#9

Not included . I don't know what it's code.


#10

No error but not working.
Could you tell me what I include before [Script]


#11

I'm not getting any error messages either, but it works for me.

The last main "container element" closing tag of the body section?


#12

Yes, Where you are run this code for preview


#13

You need to put the script immediately before the closing </body> tag, after everything else.


#14

If you are using the code you linked to in your other topic, have you remembered to correct the errors in it first?


#15

Are you all not getting What I want to ask? I think.. :smile:

My CSS and HTML and JavaScript is right as said @Paul_Wilkins and he provides a link where I can view preview but I dont know which code I use before edit this code becouse it's includes jquery .

$(function(){
  $(".urbangreymenu h3").click(function(){
  $(".urbangreymenu ul").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown();
    }
  });
});

For an example if we write JavaScript code we use <script> ..abcd .. </script> and when we use Html we use <HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML> but I don't know what I write before edit jquery code.
That why I am not able to work on this code even it corrected by @Paul_Wilkins
Could you all tell me what I right before script edit..


#16

You enclose the JQuery in <script> tags also, because it is just a JavaScript library.

But you need to include the JQuery library before your code can be implemented.

One way to do this is to add <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script> in your <head></head> or better still, just before the closing </body> tag. Just make sure it comes before your JQuery code.


#17

Thank you but same problem nog working.

Please find my mistake, I am editing:

<div id="ulMenuList" class="urbangreymenu">
<h3 class="headerbar"><a title="About Us">About Us</a></h3>
<ul class="submenu">
<li><a href="#" title="Organization">Organization</a></li>
<li><a href="#" title="Management team">Management team</a></li>
</ul>
<h3 class="headerbar"><a title="Commercial Information">Commercial Information</a></h3>
<ul class="submenu">
<li><a href="#" title="Applicable Policies">Applicable Policies</a></li>
</ul>
<h3 class="headerbar"><a title="Tariff Regulations">Tariff Regulations</a></h3>
<ul class="submenu">
<li><a href="#" title="Tariff Regulations">Tariff Regulations</a></li>
</ul>
</div>
<style>.urbangreymenu
        {
            font-family: Verdana;
            font-size: 11px;
            margin: 0;
            margin: 0 0 0 0px;
            width: 200px;
        }
        
        
      
        
        .urbangreymenu .headerbar
        {
            margin-bottom: 0px;
            margin-top: 3px; /* text-transform: uppercase; */
            padding: 0 0 0 0;
        }
        .urbangreymenu ul
        {
            padding: 0;
            margin: 0;
            list-style-type: none;
            margin-bottom: 0px;
            padding: 0px 0 0px 0;
        }
        .urbangreymenu ul li
        {
            width: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px #d2dbea solid;
            padding: 2px 0 2px 0;
            font-weight: normal;
        }
        .urbangreymenu ul li a, ul li a:visited
        {
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
        }
        .urbangreymenu ul li
        {
            border-left: 20px solid #69c;
            width: 150px;
            margin-bottom: 0;
        }
        .urbangreymenu ul li a
        {
            display: block;
            color: #369;
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
            width: 170px;
        }
        .urbangreymenu ul li a:hover
        {
            display: block;
            color: #369;
            background-color: #eee;
            padding: 3px 0 3px 8px;
            font-size: 10px;
        }
        .urbangreymenu li
        {
            list-style-type: none;
        }
        .urbangreymenu h2
        {
            margin-top: 1.5em;
        }
        
        .urbangreymenu h3.headerbar
        {
            font-size: 10px;
        }
        /* Header links styling */
        .urbangreymenu h3.headerbar a
        {
            color: Navy;
            display: block; /*border-top: 1px solid #36a;
		border-right: 1px solid #36a;*/
            background: #ddd url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            padding: 5px 6px;
            text-decoration: none;
        }
        .urbangreymenu h3.headerbar a:hover
        {
            color: #ff0000;
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            border-left: 20px solid #69c;
        }
        .urbangreymenu h3.selected a
        {
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            color: #fff;
            border-left: 20px solid #69c; /*padding: 3px 6px;*/
        }
        .urbangreymenu h3.selected a:hover
        {
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%; /*color: #36a;*/
            color: #fff;
            border-left: 20px solid #69c;
        }</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'>
<script>$(function(){
  $(".urbangreymenu h3").click(function(){
  $(".urbangreymenu ul").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown();
    }
  });
});</script>

#18

Firstly, you need to put the content within the <style></style> tags inside your head, not in the body.

Secondly, add a closing <script> tag to the line with the jQuery library in it. It should look like this

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>

#19

This should be:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>

Notice the closing </script> tag.
And then:

<script>
// Your JQuery code goes here
</script>

#20

Finally It run thank you, thank you so much all masters.
You all are genius.

The last issue is all options in menu is expandable default. how to we make close all option in each other default