<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