Search code examples
javascriptjquerymenupageload

How do I slide/open specific menu item using javascript / jquery on page load?


I'm new to java and jquery scripting, I've managed to learn how to open menu on item mouse click, but how do I open specific menu on page load?

I'm using this:

<!-- menu -->
<div id="menuone">
    <ul id="menu">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a>About</a>
            <ul>
                <li><a href="#">one</a></li>
                <li><a href="#">two</a></li>
                <li><a href="#">three</a></li>
            </ul>
        </li>
        <li>
            <a>Projects</a>
            <ul>
                <li><a href="#">project1</a></li>
                <li><a href="#">project2</a></li>
                <li><a href="#">project3</a></li>
            </ul>
        </li>
    </ul>
</div>
<!-- menu end -->

and my javascript on click is this:

function initMenu() {
  $('#menu ul').hide();
  $('#menu li a').click(
    function() {
         $(this).next().slideToggle('normal');               
      }
    );
  } 
 $(document).ready(function() {initMenu();});

but my quest is: how do I open specific item(s) on page load? How do I open menu item 2 for example ("about"), or menu utem 3 ("projects"), etc...?


Solution

  • quite easy actually;

    $('#menu li a:eq(1)').trigger('click'); //open "about"
    $('#menu li a:eq(2)').trigger('click'); //open "projects"
    

    hope I helped