2

Is there a way, using minimal css, to select an ul element, which is located directly after a div that contains a checked checkbox? I couldn't find an answer so I hope you guys can help me.

Original model I'm using is here: http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/ My goal is to make a div-treeview using minimal, standard css and avoid using js libraries etc.

Here's my setup:

the html:

<div class="css-treeview">
<ul>
    <li>
        <div class="ou">
            <input type="checkbox" id="mychk" />
            <label for="mychk">chktitle</label>
        </div>
        <ul>  <!-- <-- this ul is what I need to select  -->
            <li><!-- some content --></li>
        </ul>
    </li>
</ul>
</div>

and my css:

.css-treeview div.ou + ul  /* for hiding ul's after div with class 'ou' */
{
    display: none;
}

/* I tried something like this but this would select the ul if it was inside */
/* the div, which I don't want */
.css-treeview div.ou > input:checked + ul
{
    display: block;
}

Is there a simple, smart way to select the ul depending on the checkbox state?

crazysnake
  • 451
  • 2
  • 7
  • 18
  • 2
    You cant go back up the tree from the checked box you need to use jquery for this – 2ne May 28 '14 at 09:42
  • 1
    If you remove the div surrounding the checkbox then it will work – 2ne May 28 '14 at 09:44
  • 1
    this would be possible with plain CSS if the checkbox and the UL would be siblings. But since we do not have a parent selector, you will need to use javascript for this. – Nico O May 28 '14 at 09:44
  • 1
    @Parallel2ne "you need to use jquery for this" ?? it would be better if you say "you need to write script for this" or so. JQuery isn't the only scripting language which can do this, it's not even a language.. – T J May 28 '14 at 09:49
  • designing the HTML layout like this is a wrong way, unless you want to use script to do everything. – King King May 28 '14 at 09:54
  • Thank you for your comments, I'm ok with simple jquery. Quickly thingking, I have 2 options, use jquery to select the ul or move the div before the checkbox and give the div a style 'margin-bottom:-20px;', which will cause the chechbox and label to appear inside the div. I'll work on this for a bit... – crazysnake May 28 '14 at 10:00
  • you could move the ul into the div and just add a br after the label – Pete May 28 '14 at 10:17

2 Answers2

1

Try This Demo

<div class="css-treeview">
<ul>
    <li>
        <div class="ou">
            <label for="mychk">chktitle</label>
            <input type="checkbox" id="mychk" />
            <ul>  <!-- <-- this ul is what I need to select  -->
                <li> some content</li>
            </ul>
        </div>

    </li>
</ul>
</div>


.css-treeview div.ou ul
{
    display: none;
}

.css-treeview div.ou > input:checked + ul
{
    display: block;
}
Amit
  • 1,841
  • 1
  • 19
  • 36
  • Thanks @Pete and Amit, this is an excellent answer, however does not quite meet my goal yet. Think of collapsible organisation chart. Here the div will encompass all it's sub items, I'd rather set fixed width and height for the div and give it some content and clickable items. Although this would be fine to represent some nested information in it's own right. A little more work for me to play with. – crazysnake May 28 '14 at 11:49
0

Thank you all for your comments, I accepted Pete's and Amit's answer, as it helped me a great deal. If anyone needs to accomplish the same as I do, here's some adaptations of what I'm going for:

This one is practically the answer given here:

Html:

<ul class="menutree">
    <li>
        <div class="ou" style="background-color:#B2D1FF;">
            <div class="ou_content">
                Title<br/>
                Other data etc<br/>
                <a href="#">Link</a>
            </div>
            <input type="checkbox" id="item-0-0-1" /><label for="item-0-0-1">&nbsp;&nbsp;V&nbsp;&nbsp;</label>
            <br/>
            <ul>
                <li>
                    <div class="ou" style="background-color:#99C2FF;">
                        <div class="ou_content">
                            Title<br/>
                            Other data<br/>
                            <a href="#">Link</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="ou" style="background-color:#99C2FF;">
                        <div class="ou_content">
                            Title<br/>
                            Other data<br/>
                            <a href="#">Link</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </li>
</ul>

And here is css for above: (note I had to add the br to the selector)

body {
    text-align: center;
}

ul {
    display: inline-block;
    padding:0px;
    margin:0px;
    text-align:center;
}

li {
    display: inline-block;
    list-style: none;
    vertical-align:top;
    margin-top:20px;
    margin-right:10px;
    text-align:center;
}

div.ou {
    border:1px solid blue;
    margin:0px;
    margin-right:10px; 
    padding-top:0px;
    padding-left:20px;
    padding-bottom:20px;
    padding-right:0px;
    border-radius:10px;
    text-align:left;
    min-width:100px;
}

div.ou_content {
    min-width:150px;
    padding:4px;
    border:0px solid green;
    margin-top:10px;
    margin-right:10px;
}

label {
    border: 1px solid navy;
    float:right;
    margin-right:0px;
    margin-left:10px;
    display:inline-block;
    cursor:pointer;
    background-color:lightblue;
}


#menutree li {
    list-style: none;
}

.css-treeview input + label + br + ul
{
    display: none;
}

.css-treeview input:checked + label + br + ul
{
    display: inline-block;
    text-align: center;
}

.css-treeview input
{
    opacity: 0;
    display:none;
}

Also I did another proof-of-concept: Here's my own try-out:

Html: 

<ol id="menutree">
    <li>
        <div class="contentdiv"> place for content </div>
        <label for="c3" class="menu_label">Title1 &nbsp;&nbsp;V</label>
        <input type="checkbox" id="c3" name="level2" value="1" />
        <ol>
            <li>
                <div class="contentdiv"> place for content </div>
                <label for="c4" class="menu_label">Title2</label>
                <input type="checkbox" id="c4" name="level3" value="1" />
            </li>
            <li>
                <div class="contentdiv"> place for content </div>
                <label for="c5" class="menu_label">Title3</label>
                <input type="checkbox" id="c5" name="level3" value="1" />
            </li>
        </ol>
    </li>
</ol>

And css for this:

#menutree li {
    list-style: none; 
    text-align: center;
}

li .menu_label + input[type=checkbox] {
    opacity: 0; 
    display:none;
}

li .menu_label {
    cursor: pointer; 
} 

li .menu_label + input[type=checkbox] + ol > li {
    display: none; 
}

li .menu_label + input[type=checkbox]:checked + ol > li {
    display: inline-block; 
    text-align: center;
}

li  :not(.menu_label + input[type=checkbox]:checked + ol > li) {
    display: none;
}

div.contentdiv {
    height:40px;
    padding-top:6px;
}

li {
    border-top:4px solid blue;
    border-right: 2px solid blue;
    border-left: 2px solid blue;
    border-bottom: 0px solid blue;

    border-radius:30px 30px 0px 0px;
    margin-top:20px;
    margin-left:6px;
    margin-right:6px;
    padding-right:10px;
    padding-left:10px;
    display: inline-block;
    vertical-align:top;
    text-align: center;
    height:50px;
    min-width:100px;
}

label {
    border: 1px solid navy;
    padding:0px;
    border-radius:0px;
    vertical-align:top;
    text-align: center;
    margin-left:4px;
    margin-right:4px;
}

body {
    text-align: center;
}

ol {
    display: block;
    padding:0px;
    margin:0px;
}
crazysnake
  • 451
  • 2
  • 7
  • 18