13285

keeping first menu item expanded in jquery

Question:

I have 3 menu Items designed in HTML. I want my first Menu item to be expanded by default.

Here is my Fiddle: <strong><a href="http://jsfiddle.net/quw3Q/1/" rel="nofollow">FIDDLE</a></strong>

Posting whatever I have with me :

<blockquote>

HTML

</blockquote> <div id="example1"> <ul id="menu1" class="example_menu"> <li><a class="expanded" href="#">Program 111</a> <ul> <li><a href="#">258275h</a> </li> <li><a href="#">264007</a> </li> <li><a href="#">270650b</a> </li> </ul> </li> <li><a class="collapsed" href="#">Program 112</a> <ul> <li><a class="collapsed" href="#">25875d</a> </li> <ul> <li><a href="#">Release 1- Early Upgrade - 1404</a> </li> <li><a href="#">Release 2 - MDPP Umbrella Insurance</a> </li> </ul> <li><a class="collapsed" href="#">269162a</a> <ul> <li><a href="#">Release 1- Early Upgrade - 1404</a> </li> <li><a href="#">Release 2 - MDPP Umbrella Insurance</a> </li> </ul> </li> </ul> </li> <li><a class="collapsed" href="#">Program 113</a> <div>Hello</div> <ul> <li><a href="#">245875f</a> </li> <li><a href="#">2587940</a> </li> <li><a href="#">201254d</a> </li> </ul> </li> </ul> </div> <blockquote>

JQuery

</blockquote> $(document).ready(function () { $('#menu1 li a').click(function () { $(this).parent().children('ul').slideToggle('medium').toggleClass('collapsed').toggleClass('expanded'); //$(this).parent('ul').slideToggle('medium').toggleClass('collapsed').toggleClass('expanded'); $(this).parent().children('div').slideToggle('medium').toggleClass('collapsed').toggleClass('expanded'); }); }); <blockquote>

Style

</blockquote> body { font: 10pt Arial, Helvetica, Sans-serif; background-image: url(); margin: 0px; } a { text-decoration: none; } #example1, #example2, #example3, #example4, #example5 { float: left; } .expand_all, .collapse_all { cursor: pointer; } .example_menu { font-size: 95%; list-style: none; margin: 0; padding: 0; vertical-align: top; width: 100%; } .example_menu ul { display: none; list-style: none; margin: 0; padding: 0; } #menu1, #menu2, #menu3, #menu4, #menu5 { margin: 0; color: #96C; } #menu1 li, #menu2 li, #menu3 li, #menu4 li, #menu5 li, .example_menu li { background-image: none; margin: 0; padding: 0; } .example_menu ul ul { display: block; } .example_menu ul ul li a { padding-left: 20px; width: 99%; } .example_menu li.header3 a { padding-left: 34px; width: 98%; } .example_menu a { color: #000; cursor: pointer; display: block; font-weight: bold; margin-left: 0; width: 99%; padding-top: 18px; padding-right: 0px; padding-bottom: 12px; padding-left: 19px; } .example_menu a.expanded { background: #bbb url('images/collapse.gif') no-repeat 3px 61%; } .example_menu a.collapsed { border-top: 1px solid #E3E3E3; background-color: #bbb; background-image: url(images/expand.gif); background-repeat: no-repeat; background-position: 3px 61%; } a.collapsed + ul { display: none; } .example_menu a.normal { background: none repeat scroll 0 0 #BBBBBB; } .example_menu a:hover { text-decoration: none; } .example_menu ul a { background: #e8e8e8; border-top: 2px solid #fff; color: #000; display: block; font-weight: normal; padding: 3px 8px 2px 17px; width: 98%; } .example_menu ul a:link { font-weight: bolder; } .example_menu ul a:hover { background: #f5f5f5; text-decoration: underline; } .example_menu li.active a { background: #fff; } .example_menu li.active li a { background: #e8e8e8; } #menu1 li.footer, #menu2 li.footer, #menu3 li.footer, #menu4 li.footer, #menu5 li.footer, .example_menu .footer { background: transparent url('images/footer.jpg') no-repeat 0 0; border-top: 2px solid #fff; height: 9px; line-height: 15px; margin: 0 0 10px 0; width: 95%; } .example_menu .footer span { display: none; }

Everything is working as expected, But I want the first menu item to be expanded by default. Please be gentle, I am new to JQuery.

Answer1:

<h2><a href="http://jsfiddle.net/swfour/c7GDm/1/" rel="nofollow">Demo Fiddle</a></h2>

You can simply add the CSS:

.example_menu li:first-of-type ul{ display:block; }

Recommend

  • Stop table row toggle upon clicking link
  • Generate AST in the form of a dot file
  • Ember Select set default value
  • How to check does method systemFontOfSize(fontSize: weight:) exist in iOS
  • Spannable text is too wide for TextView
  • How to configure javadb in eclipse?
  • How to find the distance (in pixels) between the Sprite and screen corners?
  • AJAX jquery json sending array to php
  • what can i do if for loop repeat single row from mysql database?
  • jQuery panel slider opens with button click but won't close
  • ColdFusion - DateTime Format with GMT offset
  • CSS Local Font not showing up
  • Toggle visibility of text box based on status of check box -jQuery
  • jquery .height() and .width() on span tag gets inconsistent results
  • Fade Background but NOT Text
  • Find all paths in a maze using DFS [duplicate]
  • Imagemagick set interline spacing?
  • jQuery toggle hide on click elsewhere
  • Get rendered html code in Backing Component from Composite Component
  • Making Google Visualization - Annotation Chart to work in GWT
  • Cannot get text from text area
  • Getting error 'Cannot read property 'document' of undefined' while importing exp
  • How can I restyle a word when rendering a pdf with pdf.js?
  • How To Customize ASP.NET Chart Databound To SqlDataSource
  • Uncaught TypeError: $(…).select2 is not a function
  • Remove changes from one element when event occurs on another element?
  • Button click event not firing in jQuery
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Xamarin Forms - UWP Fonts
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • Unanticipated behavior
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?