MentalBlock - CollapsibleSections

[coothead]

• You are a genius
• especially if that is dynamically generatable!

Unfortunately

• is not true
• is not possible

cothead

[GrumpyYoungMan]

• You are a genius
• especially if that is dynamically generatable!

Unfortunately

• is not true
• is not possible

cothead

Thanks, but actually I can, as long as I have the #expand* in the CSS - is there not a way in CSS to make a range say #expand[1-10]?

Thanks again!

[coothead]

...is there not a way in CSS to make a range say #expand[1-10]?

Well,   what  I do is code this snippet...

Code: [Select]

#expand1:checked ~ table tbody tr:nth-of-type(2) ul,

...using my digits and the keyboard,  and C&P it.

I then  increase the value of #expand by 1 and
change the value of type() to suit.

I repeat this process until  I have the desired
number of items. Finally I remove trailing
comma of this last item.

In the HTML I numbered all the tr elements to
help with the type() value changing.

That's about as dynamic as get. 

Of course, you must bear in mind that, unlike
many others, I have nothing better to do. 

coothead

[GrumpyYoungMan]

Sorry to raise such an old topic, but the issue didn't seem worthy of raising a new topic but

CodePen

Trying to get the text to change, depending on the checkbox being selected/unselected...

it has been a long week and I am having a mental block again...

[coothead]

Hi there GYM,

change this..

Code: [Select]

    <label for="toggle" class="toggleText"></label>
    <input type="checkbox" id="toggle" name="group">

...to this...

Code: [Select]

   <input type="checkbox" id="toggle" name="group">
   <label for="toggle" class="toggleText"></label>

...with this slightly amended CSS...

Code: [Select]

html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    background: #000;
    color: greenyellow;
    font: normal 1em "Verdana";
    display: flex;
    flex-direction: column;
}

input {
    display:none;
}

header,
footer {
    flex: 0;
    padding: 0.5em 0;
}

main {
    flex: 1;
}

#content {
    display:none;
    border: 1px solid red;
    border-radius: 0.5em;
    background: #222;
    margin: 1em;
    padding: 0.5em;
}

#toggle:checked ~ #content {
    display: block;
}

.toggleText::before {
    content: "show"
}

#toggle:checked ~ .toggleText::before {
    content: "Hide";
 }

.toggleText {
    cursor: pointer;
 }

.toggleText:hover,
.toggleText:active {
    color: red;
 }

coothead

[GrumpyYoungMan]

Thank You!!

So I should have done it via ID basically? and switched the label and input around - the input first?

[coothead]

So I should have done it via ID basically?

No, the real problem was the order of the label and input elements.
The order needed to be reversed.

I only removed  a few unnecessary  CSS properties...

Code: [Select]

#toggle:not(:checked) ~ #content {
    display: none;
}

#toggle:not(:checked) ~ .toggleText label::before {
    content: "Show";
}

coothead

[GrumpyYoungMan]

Another strange problem, I can only get left padding so to get top and bottom padding do I need to create a container and pad that?

[GrumpyYoungMan]

‘Pen updated!

[coothead]

...I can only get left padding ...

You do not mention the element to which you
wish to apply top and bottom padding.   

If you were referring  to...

Code: [Select]

    <div id="content">

...then this...

Code: [Select]

#content {
    display: none;
    border: 1px solid lightskyblue;
    border-radius: 0.75em;
    background: #222;
    margin: 1em;
    padding: 2em 0.5em;
}

...worked OK for me.

coothead

[GrumpyYoungMan]

...I can only get left padding ...

You do not mention the element to which you
wish to apply top and bottom padding.   

If you were referring  to...

Code: [Select]

    <div id="content">

...then this...

Code: [Select]

#content {
    display: none;
    border: 1px solid lightskyblue;
    border-radius: 0.75em;
    background: #222;
    margin: 1em;
    padding: 2em 0.5em;
}

...worked OK for me.

coothead

I'm so sorry, that is what you get for using your phone and then getting distracted, I refer to the padding on the "show" and "hide" options.

[coothead]

Hi the GYM,

the label element is by default an inline element
The cure is to simply change that property, thus...

Code: [Select]

.toggleText {
    display: block;
    padding: 1em;
    cursor: pointer;
}

coothead

[GrumpyYoungMan]

Thanks!

I left this alone for too long, didn’t I!

I am sorry - and thanks!

[coothead]

I left this alone for too long, didn’t I!

I cannot agree. 

You should always feel free to ask questions
when the time is  exactly right for you.

coothead

[GrumpyYoungMan]

I left this alone for too long, didn’t I!

I cannot agree. 

You should always feel free to ask questions
when the time is  exactly right for you.

coothead

Thanks, well, what do you think?

I have nearly finished the layout/styling...