CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: MentalBlock - CollapsibleSections  (Read 3020 times)

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #30 on: 10 Jan 2021, 02:15:16 pm »
Quote from: GrumpyYoungMan
  • You are a genius
  • especially if that is dynamically generatable!
Unfortunately
  • is not true
  • is not possible

cothead
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #31 on: 11 Jan 2021, 03:11:37 am »
Quote from: 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!
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #32 on: 11 Jan 2021, 06:45:31 am »
Quote from: GrumpyYoungMan
...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.  ;D

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

coothead
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
MentalBlock - CollapsibleSections II
« Reply #33 on: 12 Nov 2021, 12:15:20 pm »
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...
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #34 on: 12 Nov 2021, 12:50:07 pm »
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
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #35 on: 12 Nov 2021, 12:53:35 pm »
Thank You!! :D

So I should have done it via ID basically? and switched the label and input around - the input first?
« Last Edit: 12 Nov 2021, 12:56:55 pm by GrumpyYoungMan »
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #36 on: 12 Nov 2021, 01:04:23 pm »
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
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #37 on: 12 Nov 2021, 03:17:16 pm »
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?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #38 on: 12 Nov 2021, 03:33:40 pm »
‘Pen updated!
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #39 on: 12 Nov 2021, 05:38:23 pm »
...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
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #40 on: 13 Nov 2021, 03:54:55 am »
...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.
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #41 on: 13 Nov 2021, 07:55:19 am »
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
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #42 on: 13 Nov 2021, 01:02:34 pm »
Thanks!

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

I am sorry - and thanks!
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #43 on: 13 Nov 2021, 02:26:47 pm »
Quote from: 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
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #44 on: 16 Nov 2021, 06:00:16 am »
Quote from: 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...
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

 

SMF spam blocked by CleanTalk

Advertisement