JS, Use HTML instead of variable

Question

I got a "show more" button thats works. The problem I'm having is, it uses the text from var text I want it to use it directly from HTML, any suggestions?

var status = "less";

function toggleText() {
  var text = "TEST";

  if (status == "less") {
    document.getElementById("textArea").innerHTML = text;
    document.getElementById("toggleButton").innerText = "See Less";
    status = "more";
  } else if (status == "more") {
    document.getElementById("textArea").innerHTML = "";
    document.getElementById("toggleButton").innerText = "See More";
    status = "less"
  }
}

<div id="textArea">
  <!-- Here I want to implement HTML code and show it when clicked "See More"-->
</div>

<a id="toggleButton" onclick="toggleText();" href="javascript:void(0);">See More</a>

<Script> should be <script>

Muhammad Usman
– Muhammad Usman

2018-05-05 17:49:43 +00:00
Commented May 5, 2018 at 17:49 — Muhammad Usman
– Muhammad Usman, Commented May 5, 2018 at 17:49
@GeorgeBailey Tag names are case insensitive.

jhpratt
– jhpratt

2018-05-05 17:58:11 +00:00
Commented May 5, 2018 at 17:58 — jhpratt
– jhpratt, Commented May 5, 2018 at 17:58
I just mentioned for best practice

Muhammad Usman
– Muhammad Usman

2018-05-05 17:58:29 +00:00
Commented May 5, 2018 at 17:58 — Muhammad Usman
– Muhammad Usman, Commented May 5, 2018 at 17:58

Luca Kiebel · Accepted Answer · 2018-05-05 17:55:19Z

3

You can simply change the display CSS-property of the element in question

var status = "less";

function toggleText()
{
    
    if (status == "less") {
        document.getElementById("textArea").style.display = "block";
        document.getElementById("toggleButton").innerText = "See Less";
        status = "more";
    } else if (status == "more") {
        document.getElementById("textArea").style.display = "none";
        document.getElementById("toggleButton").innerText = "See More";
        status = "less"
    }
}

<div id="textArea" style="display: none;">
    Here I want to implement HTML code and show it when clicked "See More"
</div>


<a id="toggleButton" onclick="toggleText();" href="javascript:void(0);">See More</a>

answered May 5, 2018 at 17:55

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thatkookooguy · Accepted Answer · 2018-05-05 18:10:05Z

you can add a class to the container of both elements to change both of their statuses together.

Here, I add the class less-mode to the container to both show the text inside the textArea and change the button to show less instead of show more.

Instead of saving the state in the javascript, we can know the state by checking if the class already exists on the container.

There are two "modes":

when container has the class less-mode, make textArea display: block to show it, and show the less element inside the link.
when container doesn't have the class less-mode, make textArea display: none to hide it completely, and show the more element inside the link.

This way, most of the responsibility for the visual change lay in the CSS and HTML. the JavaScript code only switches between them

const containerElement = document.getElementById("container");

function toggleText() {

  if (containerElement.classList.contains('less-mode')) {
    containerElement.classList.remove('less-mode');
  } else {
    containerElement.classList.add('less-mode');
  }
}

.more-btn .less {
  display: none;
}

.more-btn .more {
  display: block;
}

#textArea {
  display: none;
}

.container.less-mode #textArea {
  display: block;
}

.container.less-mode .more-btn .less {
  display: block;
}

.container.less-mode .more-btn .more {
  display: none;
}

.red {
  background: red;
  color: white;
  padding: 5px;
}

<div class="container" id="container">
  <a id="toggleButton" class="more-btn" onclick="toggleText();" href="javascript:void(0);">
    <div class="more">See More</div>
    <div class="less">See Less</div>
  </a>
  <div id="textArea">
    <h3>Title</h3>
    <div class="red">red text</div>
  </div>
</div>

Thatkookooguy · Accepted Answer · 2018-05-05 19:30:11Z

I've tried to keep it as simple as possible. The text is hidden by default, and once the button is clicked the text are style display attribute is been toggled from none to block.

(function() {


  var text = document.getElementById('text');

  var button = document.getElementById('button');
  button.addEventListener('click', function(e) {
    e.preventDefault();
    var status = this.dataset.status;
    if (status === 'less') {
      this.dataset.status = 'more';
      this.innerHTML = 'See More';
      text.style.display = 'none'

    } else {
      this.dataset.status = 'less';
      this.innerHTML = 'See Less';
      text.style.display = 'block'

    }
  });

})();

#text {
  display: none;
}

<div id="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium amet consectetur corporis cum cumque distinctio eveniet excepturi expedita facilis incidunt iure maxime nesciunt nulla numquam perferendis qui quo, sint velit?
</div>
<button id="button" data-status="less">See More</button>

Collectives™ on Stack Overflow

JS, Use HTML instead of variable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related