0

I have been trying to figure out a way to expand text (similar to collapsible section) in a sentence. I want to be able to wright a sentence and have some of the words clickable to expand and show more text. All of they ways I have found create a section below the clicked word or button that expands and contracts. Is there a way to do this?

Example: Here are a few words on my thought about the movie Deadpool

click on Deadpool

Here are a few words on my thought about the movie Deadpool it was so well shot and a movie I just can't wait to see again.

2
  • What is your actual question? Have you attempted anything? You've asked "Is there a way to do this?" immediately after a sentence that starts with "All of the ways I have found...", so I have to imagine that you already know that there are plenty of ways to do this. Please specify what you're actually asking, or if you have code, please include it. Dec 8, 2018 at 1:13
  • Yes, sorry. I have found several ways to create an expandable drop down but I have not been able to find any examples of it just expanding the sentence into a paragraph. Probably due to my bad googling. I can't think of a proper way to search for an example let alone the code to create my own.
    – 11aadams
    Dec 8, 2018 at 1:43
1

You might be looking for HTML5's <details> tag:

details,
details[open],
summary {
  display: inline;
}

summary {
  cursor: pointer;
  font-weight: bold;
}
Here are a few words on my thought about the movie <details><summary>Deadpool</summary> it was so well shot and a movie I just can't wait to see again.</details>

1
  • Hey this is awesome. Do you know if there is a way to keep it from dropping down to a new line?
    – 11aadams
    Dec 8, 2018 at 1:40
0

The best I've found is StretchText, implemented with js.

If you're open to other displays, your problem could be solved with popup or toggle text, also on w3schools.

FWIW, it might be possible to hack the css of details (the other answer).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.