Help in JavaScript

Question

In this code, I want a button to first display some content on clicking and then on clicking again, it should hide that content. Please guide me how to do it.
https://code.sololearn.com/W0a19a0a2135

Answer 1

function viewContent() {
var c = document.getElementById("content");
var h = document.getElementById("heading");
if (c.style.display) {
c.style.display = "";
h.textContent = "Click to view more content";
}
else {
c.style.display = "block";
h.textContent = "Click to hide content";
}
}

Answer 2

visph can you please explain if(c.style.display) and c.style.display = "";

Answer 3

c.style.display = "" reset the display value

if (c.style.display) is true if display == "block"

Answer 4

visph how can I add a different css to 'Click to hide content'

Answer 5

either by adding className / modifying classList properties (related to element class attribute), or by using style property (as you do with 'c' (content element id) for changing 'display' css rule...

through style property you should use camelcase css properties while in css you should use kebabcase (ie: background-color should becomes backgroundColor)... as dash is not valid in javascript identifiers...