How to display sub list in another div

Question

0.00/5 (No votes)

See more:

Hi,
I have list corresponding sub list.is it possible to do that if i click on list should display corresponding sub list in another

.
if any one have such sample please share

How can i achieve it.please help me

What I have tried:

i am thinking that when i click on list will store corresponding sub list in an array and display in another

Posted 10-Mar-16 18:34pm

Veena Hosur

Updated 10-Mar-16 22:23pm

Add a Solution

Comments

[no name] 11-Mar-16 1:15am

Please elaborate more what is sublist and put in array - provide relevant code.

Veena Hosur 11-Mar-16 1:38am

i have list of departments in <div> called dep. When i click on one departments i want to display coresponding sub list in in <div> called sub.how can i do it

[no name] 11-Mar-16 2:10am

Post relevant HTML code and tell what you need exactly?

Karthik_Mahalingam 11-Mar-16 1:43am

post some code

Veena Hosur 11-Mar-16 2:00am

its my idea.i want to achieve it i dont know how to do it

Veena Hosur 11-Mar-16 2:09am

http://jsfiddle.net/ednf2pzq/

check it.I want to some thing like this but instead of this is my overlay i want to display sub list

Veena Hosur 11-Mar-16 2:21am

http://jsfiddle.net/ednf2pzq/

Karthik_Mahalingam 11-Mar-16 2:59am

what is your sub list?
the div will be static ?

Veena Hosur 11-Mar-16 3:01am

hmm..its static

Karthik_Mahalingam 11-Mar-16 3:17am

check out my solution

Veena Hosur 11-Mar-16 3:49am

i dont have hover.I want clickable

Karthik_Mahalingam 11-Mar-16 3:51am

ok.

Veena Hosur 11-Mar-16 3:53am

i want clickable and it should display corresponding child list

Karthik_Mahalingam 11-Mar-16 3:55am

try this code
$(function () {
$('.main-menu li').click(
// when clicked
function () {
$('#div1').html('');
var $li = $(this);
if ($li.has('ul')) {
$('#div1').html($('ul',$li).html());
}

});
});

Veena Hosur 11-Mar-16 4:05am

its working but its not showing corresponding child list.its not at all changing according to parent

Karthik_Mahalingam 11-Mar-16 4:15am

how do u want to display then?

Veena Hosur 11-Mar-16 4:24am

please check below code.how its displaying i wanted to display corresponding child list

Karthik_Mahalingam 11-Mar-16 4:29am

$('.main-menu li').click(
use this

Veena Hosur 11-Mar-16 4:33am

even though its displaying only first child list

Karthik_Mahalingam 11-Mar-16 4:34am

Please post your entire html. i will review it and give u the solution..

Veena Hosur 11-Mar-16 4:35am

no its working now

Veena Hosur 11-Mar-16 4:35am

i have done some mistake.now its working.thank you

Karthik_Mahalingam 11-Mar-16 4:37am

if it helps, pls close the post by marking it as answer

Veena Hosur 14-Mar-16 1:34am

can you tell me how to change color sub list for above example

Karthik_Mahalingam 14-Mar-16 6:45am

write this
$(function () {
$('.main-menu li').click(
// when clicked
function () {
$('#div1').html('');
var $li = $(this);
if ($li.has('ul')) {
$('#div1').html($('ul',$li).html());
$('#div1').css('color','green');

}

});
});

Veena Hosur 15-Mar-16 6:27am

thank you for replay. i solved it myself
#div1 a {
color:darkblue;
font-weight:bold;
}

Veena Hosur 15-Mar-16 6:28am

i have one more doubt that when we display sub list in div 1.it will display as list in div 1 or what

Karthik_Mahalingam 17-Mar-16 4:17am

it displays the inner html, whatever present inside <div> </div> it will display..

Veena Hosur 17-Mar-16 5:13am

we are trying to display sublist it will display as list or what. Because i wanted to do onclick on sub list which is displaying in another div

Karthik_Mahalingam 18-Mar-16 2:20am

how do u want to display?
we can display as a list or any

3 solutions

Solution 1

Check this out: Creating a Dropdown Menu with HTML & CSS[^]

Posted 10-Mar-16 19:27pm

Peter Leow

Updated 10-Mar-16 19:28pm

v2

Solution 3

html:

$(function () {
    $('.panel-body').click(
     
    // when clicked
    function () {
     
        $('#div1').html('');
        var $li = $(this);
      
        if ($li.has('ul')) {
            $('#div1').html($('ul', $li).html());
        }

    });
});

script:

$(function () {
    $('.panel-body').click(
     
    // when clicked
    function () {
     
        $('#div1').html('');
        var $li = $(this);
      
        if ($li.has('ul')) {
            $('#div1').html($('ul', $li).html());
        }

    });
});

Posted 10-Mar-16 22:23pm

Veena Hosur

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-03-10T21:17:00

Try something like this
modify it as per your need

CSS

CSS

<style>
        
        .sub-menu {
            display: none;
            list-style: none;
            position: absolute;
            left: 10px;
            width: 150px;
        }
    </style>

Javascript/Jquery

<script>
        $(function () {
            $('.main-menu  li').hover(
           // when hovered
           function () {
               var $li = $(this);
               if ($li.has('ul')) {
                   $('#div1').html($('ul',$li).html());
               }


           },
           // when NOT hovered
           function () {
               $('#div1').html('');
           }
       );
        });



    </script>

HTML

HTML

<ul style="list-style:none" class="main-menu">
       <li><a href="#">Item One</a></li>
       <li><a href="#">Item Two</a></li>
       <li>
           <a href="#">Item Three</a>
           <ul class="sub-menu">
               <li><a href="#">Sub Item One</a></li>
               <li><a href="#">Sub Item Two</a></li>
               <li><a href="#">Sub Item Three</a></li>
               <li><a href="#">Sub Item Four</a></li>
               <li><a href="#">Sub Item Five</a></li>
           </ul>
       </li>
   </ul>
   <div id="div1" style="height:300px; width:300px; border:1px solid red">This is my div</div>