Add expand/collapse markers

[web148]

In my website I have an automatically generated toc where items can be expanded (if there are children headers: such as h3 within h2).
This TOC works, but I wish that a visitor could see if there is something to expand, through a marker (like + o -).
How should I change the css, that now is:

#generated-toc ul ul {
  display: none;
}
#generated-toc > ul {
  xxdisplay: block !important;
  margin-left: 30px;
  padding: 0;
  list-style: none;
}

#generated-toc ul .active + ul {
  display: block;
  margin-left: 3%;
}
#generated-toc ul a {
  text-decoration: none;
  display: inline;
  padding-left: 0px;
}
#generated-toc a:before, #generated-toc a:after {content: none;}
#generated-toc ul, #generated-toc li {padding-left: 0; max-width: 100% !important}

#generated-toc ul ul a { font-size: 90%;}
#generated-toc .notmissing a.active {background: transparent;}

[rpg_digital]

@web148

#generated-toc a:before, #generated-toc a:after {content: none;}

I’m thinking you could add those symbols with :after. You would need to differentiate the toggling submenu anchors from the non-toggling. Maybe with a className.

For example, possibly something like this?

a.has-submenu:after {
  content: '+';
  ... more styling here ...
}

a.has-submenu.active:after {
  content: '-';
  ... more styling here ...
}

You also seem to have an issue where clicking on a category, say for instance ‘Opere’, takes you down the page to 1. Dialoghi socratici rather than staying where the newly opened submenu is.

It seems to me these links could really do with having an href=‘#’ e.g.

<a href="#" class="active">Opere</a>

Just some ideas.

[PaulOB]

Hi,

You can achieve a plus sign like this:

#generated-toc li:has(ul){
position:relative;
list-style-type:none;
padding-left:2%

}
#generated-toc li:has(ul) >a:before{
content:"+";
position:absolute;
left:-.3rem;
top:-.2rem;
font-weight:bold;
font-size:1.5rem
}

The problem you have is that at present if you click “Opere” the page travels to opere and you have to scroll back up to see the opened menu. I suggest that for the top level you remove the destination.

e.g.
change this

<a href="#heading_toc_j_2" class="active">Opere</a>

to this:

<a href="#nogo" class="active">Opere</a>

Or address in your js.

[PaulOB]

Following the same format you can change the plus to a minus when the menu is open with the following addition to my code above.

#generated-toc li:has(ul) >a.active:before{
content:"-";
}

[web148]

@PaulOB

#generated-toc li:has(ul) >a.active:before{
content:"-";
}

Very good, thank you!
I have only to fix the distance between the marker and the text (when the toc is moved to the right, by clicking on the double arrow symbol).

EDIT

This problem seems solved. But only for Vivaldi.
In Falkon and Firefox the new code doesn’t work…

[rpg_digital]

Sorry, I steered clear of :has, because it isn’t properly supported yet. For instance in firefox you have to enable the option in config layout.css.has-selector.enabled.

:has() CSS relational pseudo-class | Can I use... Support tables for HTML5,...

I look forward to when it is though

[PaulOB]

@web148

In Falkon and Firefox the new code doesn’t work…

Yes sorry, I should have mentioned that :has isn’t working in Firefox (and others) yet although it won’t be long in coming as its already there under a flag. Browser support is pretty good at 83% but if you want higher support then you need to add a class to the html as @rpg_digital mentions above.

You can do it without a class with full browser support but it gets a little complex with the selectors and there is little room to change anything else.

e.g. you could do this instead.

#generated-toc li{
position:relative;
}
#generated-toc li a:first-child:not(:only-child):before{
content:"+";
position:absolute;
left:-.3rem;
top:-.2rem;
font-weight:bold;
font-size:1.5rem;
background:white;
padding-right:5px;
}
#generated-toc li >a.active:first-child:not(:only-child):before{
content:"-";
}

Which will give you this result.

[PaulOB]

@rpg_digital

Sorry, I steered clear of :has, because it isn’t properly supported yet.

Yes, I would generally avoid it for ‘critical layout options’ but in cases where support is lacking the result is the same as the OP already had without using it then it can be classed as a non critical enhancement.

I don’t think it will be long won’t before Firefox supports it and as the caniuse site shows Firefox support is very very low these days.

If a class can be added easily then that would generally be my approach also

[web148]

Perfect! It works like a charm!

[PaulOB]

If you want brown bullet points as well then you could get rid of the default bullets and place your own bullet. (I notice that firefox has a slightly different bullet position anyway that can’t seem to be changed. the following code will cure that problem.)

The complete changed code would be this.

/* added by PaulOB*/

#generated-toc li{
 position:relative;
 list-style:none;
 padding-left:1rem;
}
#generated-toc li a:before{
 content:"\2022";
position:absolute;
left:-.3rem;
top:-.2rem;
width:1rem;
text-align:center;
font-weight:bold;
font-size:1.5rem;
padding-right:5px;
}
#generated-toc li a:first-child:not(:only-child):before{
content:"+";
}
#generated-toc li >a.active:first-child:not(:only-child):before{
content:"-";
}
#generated-toc ul .active + ul{margin-left:0;}

Just an idea

[web148]

Thank you. But for the moment, it is good as is already.