1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

<ul> <li> with jquery question

Discussion in 'jQuery' started by qwikad.com, Sep 15, 2014.

0
  1. #1
    The subcategories tend to show for a split second on load or refresh. Is there a way to keep it shut and show them only when you click on the CATEGORY link?

    <script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<script type="text/javascript">
$(document).ready(function() {
  $('#category ul').hide();
  $('#category li a').click(
    function() {
        $(this).next().slideToggle('normal');   
      }
    );
});
</script>

<style type="text/css">
#category, #category ul {margin: 0px; padding: 0px; text-align: left;  list-style: none;}
#category li {cursor: pointer; }
</style>


<ul id="category">

<li><a onclick="javascript:void(0);">CATEGORY</a><ul>

<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>

</ul></li>
</ul>
    Code (markup):
     
    qwikad.com, Sep 15, 2014 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Instead of hiding them via jQuery, hide it in CSS (display: none) and show them when needed via javascript?
    It will however break a bit if you're concerned about accessibility
     
    PoPSiCLe, Sep 15, 2014 IP
  3. Helge Sverre

    Helge Sverre Prominent Member Affiliate Manager

    Messages:
    840
    Likes Received:
    99
    Best Answers:
    2
    Trophy Points:
    305
    Digital Goods:
    2
    #3 
    <html>
<head>
    <title>UL LI TEST</title>

<style>

#category li ul {
    display: none;
}

#category li:hover ul {
    display: block
}



</style>
</head>
<body>

<ul id="category">
    <li><a href="#">CATEGORY</a>
        <ul>
    
            <li><a href="/">Subcategory</a></li>
            <li><a href="/">Subcategory</a></li>
            <li><a href="/">Subcategory</a></li>
            <li><a href="/">Subcategory</a></li>
            <li><a href="/">Subcategory</a></li>
            <li><a href="/">Subcategory</a></li>
            <li><a href="/">Subcategory</a></li>
            <li><a href="/">Subcategory</a></li>
            
        </ul>
    </li>
</ul>



</body>

</html>
    HTML:
    Could that possibly work?
     
    Helge Sverre, Sep 16, 2014 IP