-1

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

f484126
  • 93
  • 1
  • 1
  • 8
  • 2
    You do realize that you are trying to change the font-size of something you made hidden right? – Anonymous Jun 08 '15 at 14:01
  • `.shrinkable a { font-size:75%; }` – pawel Jun 08 '15 at 14:03
  • you have an error in your function call to "showMore", you have other errors as well, and your question is not very clear. You should clean up your code to the specific question you are looking for and clear up the question. There are a lot of problems with that fiddle beyond just trying to change font size. Use F12 on your browser to see javascript console, and see errors when you click "more" link, for starters. – tremor Jun 08 '15 at 14:04
  • possible duplicate of [show more/Less text with just HTML and JavaScript](http://stackoverflow.com/questions/20735726/show-more-less-text-with-just-html-and-javascript) – tremor Jun 08 '15 at 14:11
  • @tremor but this is a question about setting the font size, not implementing more/less functionality. – pawel Jun 08 '15 at 14:12
  • @pawel sorry, it seemed unclear, as your fiddle code does not work at all, you should probably clear up the question and the example. Are you just trying to set it or change it dynamically? – tremor Jun 08 '15 at 14:13
  • @ Tremor, pawel didn't post the question I did but he is correct with what he says regarding the parameter of my question. @Pawel I have used Tremors solution as it enabled to to dictate font-size in px, and he clearly showed how to implement it. – f484126 Jun 08 '15 at 15:06

1 Answers1

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

Community
  • 1
  • 1
tremor
  • 3,068
  • 19
  • 37
  • Thank you Tremor for the solution to the font size and general advise - I was following - http://stackoverflow.com/questions/29698072/truncate-text-with-javascript-with-read-more-and-read-less - I'll review the link you've posted given that you've flagged up some issues with the previous solution provided. – f484126 Jun 08 '15 at 15:16
  • Tremor, is the current code I'm using easy to modify? My knowledge is lacking so from the solutions on that page I cannot see the wood from the trees. – f484126 Jun 08 '15 at 15:36