Collapsing and showing li items

Question

Hi I have a requirement.In this an contains multiple items in a view page in MVC. There is an item which is shown by default during the page load. When user clicks on search button all the items means all the menu items are opening. How to solve this by making only particular menu item should be shown as opened during button click.How to solve this using JQuery?

Mahesh Bodepudi · Answer

Hi Midhun Thanks for your response.As we have to put the id of each list dynamically can you please let me know how to use the id of the selected and also some times the page gets refreshing and it is expanding all the menu items once in a while and then closing.Is there any specific static property to set in the html script?

Midhun T P · Answer

Hi Just change click function as below - $('#SearchBtn').click(function () { $('ul# list1 > li').hide(); $('ul# list1 > li#HWComponents').show(); });

Mahesh Bodepudi · Answer

Hi Midhun Thanks for the reply.Applied the solution but dint get the result as expected.Please find the code below. Home { %> Custom List User --%> Storage Location Supplier Platform --%> Project Drawing Type Customer --%> Model Year --%> Buffer Box Type EMC Module Type Tester Equipment Type Programming Pod H/W Components ECU Motor Pressure Sensor Test Block Drawing Buffer Box EMC Load Box EMC Hardware Tester Equipment Suitcase Computer PCBA Assemblies Test Block Assembly EHCU Test Assembly --%> Release EMC Test Setup S/W Assembly Suggestions Lab Tracking In button click written like below $('#SearchBtn').click(function () { $('ul.classname > li').hide(); $('ul.classname > li#HWComponents').show(); }); By defaultHWComponents items are opened.Then when clicking on search button all the other list items are getting collapsed and then those are hided. Please provide the solution for this.

Vinay Singh · Answer

Hi check the link http://jqueryui.com/accordion/ http://www.aspdotnet-pools.com/2016/02/jquery-accordion-menu-with-sortable.html

Midhun T P · Answer

Hi By default you have to add style=display:none for all li's and on document.ready make particular li show using below script. $(function(){ $('li#particularid').show(); }); And regarding getting id of selected li i don't know where is your button and what is happening when it is clicked? You may need something to identify which li to be shown. How are you making the li selection?

Midhun T P · Answer

Hi Please try below code - On your button click function write $('ul.classname > li').hide(); $('ul.classname > li#particularli_id').show(); If it doesn't solves your issue please provide the code which you are using for the same.