CODEWITHSUNDEEP
javascripthtmlcss
Reginald1234
Reginald1234

Reputation: 335

JS, Use HTML instead of variable

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>

Upvotes: 2

Views: 79

Answers (3)

Shahar
Shahar

Reputation: 2191

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>

Upvotes: 1

Thatkookooguy
Thatkookooguy

Reputation: 7012

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>

Upvotes: 2

Luca Kiebel
Luca Kiebel

Reputation: 10096

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>

Upvotes: 3

Related Questions