Read More Read Less Button

intro

Hey ! Today I’m trying a tutorial on w3schools about read more or read less button with javascript. It doesn’t look so complicated but there are a few new points to develop, particularly with javascript part.

At this point :

  • explain js part
  • how react buttons if I do 3 boxes with text and same button references ? Is it linked ton only one id – it is the hypothesis
  • can I put the button on another place ?
  • can I put some effects on the spreading of the box ?
  • what happens if I put some designs like border on box, how box reacts with movement
  • how make the all responsive ?

where to start ?

I plan different sections with attempts and descriptions. I’m a messy-minded so starting by a plan is always a good step.

What are the elements here ? What are links between things ? How does it work ? How to use right terms in right contexts ?

I put some sentence parts into dashed boxes because I think it’s not the right way to say the thing and I’m searching better way to say that but, one thing at a time fury.

example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.

description

So, we have the beginning of a text which is finished by ellipsis points. Click on the read more button, what happens ? The box expands and the entire text appears. Look at the button text content modification, now we can read ‘read less’

Notice how the button is able to execute 2 actions : expand and reduce the visible content into the box

stuff into

What are the tags used in ?

  • We have a div
  • Into this div, we have : a paragraph tag which contains the text and 2 span parts. We have also, lastly, a button tag.
  • Notice how the 2 span parts and button have an id, it’s related to javascript
  • Also notice the fact that the expansion of the box has no influence on under content

HTML

insert this part when cleaned

CSS

insert this part when cleaned

CSS part is the simpliest and contains only one line which is relative to the span with the ‘more’ id. The idea is that the span part which contains the part of the text which will expand is not displayed.

JS

insert this part when cleaned

Isn’t it the most exciting part ? I’m still a very early beginner so I suppose that I couldn’t answer all of questions but well I’m not sure if there is an interest to list them but maybe to don’t go too deeper into shadow… I find it easier to divide big problem into little ones so how can we achieve that on the javascript code part?

function

It is the first line of JS code. It asks to create a function called

'myFunction()'
which is related to button onclick action set into the HTML part. In brief, when you click on the button, it calls the function and, by extent all elements which constitutes it. You can adapt the name but don’t forget to adapt it into HTML part too

variables

time to set the variable will be on work in the script. There are 3 :

  • dots : first span, contains ellipsis points
  • moreText : second span, contains the text which is not displayed yet
  • btnText : button part with alternated text (read more or less)
If you remember the html part, it is why id occur. You define a variable name that you’ll use into the js loop and this variable is related to a part from the html.

if else loop

Okay here we are, tricky part ! The if else loop ! It asks the function to do something if defined criterion are met and something else if criterion aren’t met. So in this case :

if ()

if dots part is not ‘none’, in other words if dots part is displayed then do :

  • display dots part inline
  • button has ‘read more’ text
  • the text to extend is not displayed
So, this part is the part where we start. In deed, it is the current situation when you arrive on the page. We can say that this part is the ‘initial state’.

else

The second part sets the conditions of changes and come from the onclick action on button. What is the state of stuff when read more is deployed ? ellipsis points (dots) are not anymore displayed and replaced by text which is now displayed. On the button, it is not anymore ‘read more’ but ‘read less’. The added text id displayed inline