How to hide elements of code and reveal them when you click them HTML

Question

I was looking at some HTML coding on a website and I saw that a lot of websites use these 3 dots (...) to hide bits of code between 2 <>'s.

Example: https://i.stack.imgur.com/Gpy9r.jpg

When you click on the dots, more code opens up and you can read what is inside of the 2 <>'s.

Example 2: https://i.stack.imgur.com/t2tYS.jpg

So my question is, how do I make this in my own code? Like if I have <> A LOT OF TEXT <>, how would I make the text inside the <>'s 3 dots and only visible when you click on them (to save space).

Thanks in advance!

It's possible by JS, not plain HTML. You're looking for `onclick` event in the basic solution. — pavel, Jun 06 '21 at 16:20

Chitwan · Answer 1 · 2021-06-06T16:40:53.397

0

I read your question and came up on this solution and it is working perfectly fine.

<html>
<head>
<style>
  .alterabletext{
  display: inline-block;
  cursor: pointer;
  }
</style>
<title>EXAMPLE</title>
</head>
<body>
<div class="content">
&lt; <div class="alterabletext" onclick="myFunc()" id="alterabletext">...</div> &gt;
</div>
<script>
  function myFunc(){
    var element = document.getElementById("alterabletext");
    element.innerHTML="A LOT OF TEXT";
  }
</script>
</body>
</html>

I hope this served you as you wanted. Good day!

edited Jun 06 '21 at 16:40

answered Jun 06 '21 at 16:31

Chitwan

11
4

Hi, @chitwan! Welcome too! Looks like your answer is a duplicate.... Check the Code of Conduct [https://stackoverflow.com/conduct] – Tiago Rangel Jun 06 '21 at 16:53

Tiago Rangel · Answer 2 · 2021-06-06T16:59:10.470

I read your question and came with this simple solution. Looking good!

<html>  <!-- Start the document -->
<head>
<!-- Ads some styles -->
<style>
  .demo { /* Gets the element by the CLASS */
  cursor: pointer; /* Use cursor:pointer to make a pointer cursor :-) */
  /* Optional. do not include this... */
  font-size: 20px;
  color: black;
  padding: 10px;
  }
</style>
<title>EXAMPLE</title> <!-- Ads a title to your webpage -->
</head>
<body>
   <span style="float: right;">&lt; <span class="demo" onclick="myFunction()" id="demo">⋮</span> &gt;</span>
<script>
  function myFunction(){
    var x = document.getElementById("demo"); // Creates an variable to help us change the text - this variable identifies the element from the DOM (HTML tag)
    x.innerHTML="Lot's of text!"; // Get the element from the variable and change it
  }
</script>
</body>
</html>

Nice day! PS: Looking for what < and > means? Check What do < and > stand for?

Tiago R.

How to hide elements of code and reveal them when you click them HTML

2 Answers2