how to target href to multiple divs?

Question

I used the method shown in How to target the href to div to target the href to div. It worked. But I need to add another level.

HTML

<ul >
    <li class="active"><a href="#m1">home</a></li>
    <li><a href="#m2">settings</a></li>
</ul>

<div class="target">
    <div id="m1">
        <ul >
            <li class="active"><a href="#subm1-1" title="Home1">Item1</a></li>
            <li><a href="#subm1-2">Item 2</a></li>
        </ul>
    </div>

    <div id="m2">
        <ul>
            <li class="active"><a href="#subm2-1" title="Home1">Item1</a></li>
            <li><a href="#subm2-2">Item 2</a></li>
        </ul>
    </div>
</div>

<div class="target123">
    <div id="subm1-1">
        content1
    </div>
    <div id="subm1-2">
        content2
    </div>
    <div id="subm2-1">
        content3
    </div>
    <div id="subm2-2">
        content4
    </div>
</div>

CSS

.target > div {
    display:none;
}

.target > div:target{
    display:block;
}


.target123 > div {
    display:none;
}

.target123 > div:target{
    display:block;
}

My issue is when I click on the link, "item 1" in the content in appears in the correct place. But the content in disappears.

How can I stop this?

My divs are positioned next to each other. So one div doesn't overlap the other.

i don't understand what the :target in your css should mean, did you probably mean .active by any chance? — wiesion, Sep 09 '14 at 11:21
This would need scripting (javascript/jquery). Alternatively, you could make multiple pages, one for each of the elements as f it's selected first. Then, when they select a second element, show/hide the others. Would be a pain though. — James Korden, Sep 09 '14 at 12:28

score 5 · Answer 1 · answered Sep 09 '14 at 11:22

If I understand correctly what you're trying to do, this is not possible using the :target attribute. The target is always the part of the URL after the #, and there can always only be one target at a time.

This means that whenever you activate a target all the other elements are going to be hidden again. You cannot show contents based on two different targets at the same time using this method.

how to target href to multiple divs?

1 Answers1