CODEWITHSUNDEEP
javascripthtml
Maro
Maro

Reputation: 2629

HTML List Hide Top level

I have a list like this,

  1. Key1
    • Belgium
    • France
  2. Key2
    • Germany
  3. Key3
    • Italy
    • USA

How can i hide only the outer lists (key1, key2, key3) Hide not remove because the sorting is done on the Keys only.

Resault should be

Thanks for the support

Upvotes: 0

Views: 123

Answers (4)

Adriaan
Adriaan

Reputation: 378

Try this:

<ul>
<li>Key one
    <ul>
        <li>Belgium</li>
        <li>France</li>
    </ul></li>
<li>Key two
    <ul>
        <li>Germany</li>
    </ul></li>
<li>Key three
    <ul>
        <li>Italy</li>
        <li>USA</li>
    </ul></li>

​

CSS:

ul li {
    text-indent: -3000px;
    display:block;
}
ul li ul li {
    text-indent: 0px;
}

Hope it works, haven't tested it... but should work with text-indent: -3000px;

EDIT: Change text-indent:none; to text-indent:0px;

Upvotes: 0

Armatus
Armatus

Reputation: 2191

Just as an alternative to previous answers, if you have access and can control how the HTML looks, you could instead create the list like this:

<ul>
    <li sort="Key1">Belgium</li>
    <li sort="Key1">France</li>
    <li sort="Key2">Germany</li>
    <li sort="Key3">Italy</li>
    <li sort="Key3">USA</li>
</ul>

You could then use the custom sort attribute to sort rather than the outer lists.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

The following seems to work as you require.

HTML:

<ol>
    <li>Key one
        <ul>
            <li>Belgium</li>
            <li>France</li>
        </ul></li>
    <li>Key two
        <ul>
            <li>Germany</li>
        </ul></li>
    <li>Key three
        <ul>
            <li>Italy</li>
            <li>USA</li>
        </ul></li>
</ol>​

CSS:

ol > li {
    font-size: 0;
}

​ol > li li {
    font-size: 16px;
}​

JS Fiddle demo.

Upvotes: 0

sp00m
sp00m

Reputation: 48817

This should do the trick:

HTML:

<ol>
    <li>Key1
        <ul>
            <li>Belgium</li>
            <li>France</li>
        </ul>
    </li>
    <li>Key2
        <ul>
            <li>Germany</li>
        </ul>
    </li>
    <li>Key3
        <ul>
            <li>Italy</li>
            <li>USA</li>
        </ul>
    </li>
</ol>

JS:

$(function() {
    $("ol ul li").each(function() {
        $("ol").append("<li>" + $(this).html() + "</li>");
    });
    $("ol > li:has(ul)").hide();
});

Upvotes: 1

Related Questions