Set "More" "Less" font size

Question

I'm aware there are other questions relating to "show more" and "show less", but this is specifically looking at font size. I'm hoping this will be obvious to a javascript whizz (which I'm not!). I'm trying to set the font size of the "More" and "Less" part of the code (see fiddle). I assumed I'd do this in the CSS by adding a font-size like below, but this has no impact. Does anybody know what needs to be added/modified? Please note I'm not looking for the code to be Jquery, but pure JS like the Fiddle.

.hidden {
display: none;
font-size: 5px;
}

See JSFiddle

Answer 1

You need to fix your fiddle a lot, but to get the font size of your more/less links to be smaller create a class called small and assign it to the A TAG.

https://jsfiddle.net/z10rL3xw/2/

.hidden {
    display: none;
}
.small {
  font-size: 5px;  
}

and put that class in the A link, in the span it is not doing anything for you the way you have things laid out.

You also have some issues in "shrinkables" code: your class for hidden is in a span for more and in the A tag for less. There are a lot better ways to execute that part of your code. Hope this font fix helps, but overall you should check the more/less examples from this stack post: show more/Less text with just HTML and JavaScript