Toggle element with cssText

javascript set style class
javascript get css class properties
javascript style
javascript change css class property
getelementsbyclassname
setattribute
dynamically change css class with javascript
jquery css

I want to toggle element visibility. Currently, when clicking button1, it's just hiding, and not toggling.

This is my code and I want to know why it doesn't show button2 after hiding it.

function fonk10() {
var x = document.getElementsByClassName("eben")[0];
    if (x.style.cssText === "display:none") {
        x.style.cssText = "display:inline-block";
    } else {
        x.style.cssText = "display:none";
    }
}
.eben{
  background:green;
  padding:5px;
  display:inline-block;
}

#eben{
  background:green;
  padding:5px;
  display:inline-block;
}
<div id="eben" onclick="fonk10()">BUTTON1</div>
<div class="eben">BUTTON2</div>

The condition you are using is always false. That's why always else is executing. You have to format the string little bit by inserting space after : and ; at last.

Change

if (x.style.cssText === "display:none") {

To

if (x.style.cssText === "display: none;") {

function fonk10() {
  var x = document.getElementsByClassName("eben")[0];
  if (x.style.cssText === "display: none;") {
      x.style.cssText = "display: inline-block";
  } else {
      x.style.cssText = "display: none";
  }
}
.eben{
  background:green;
  padding:5px;
  display:inline-block;
}

#eben{
  background:green;
  padding:5px;
  display:inline-block;
}
<div id="eben" onclick="fonk10()">BUTTON1</div>
<div class="eben">BUTTON2</div>

Styles and classes, For instance, to hide an element, we can set elem.style.display = "none" . cssText = `color: red !important; background-color: yellow; width:  Definition and Usage. The cssText property sets or returns the contents of a style declaration as a string.

Very nice question: you need inline stiles for the second button. You also need "orthographic precision" for your css roules. But I wouldn't recommend doing it in production.

var x = document.getElementsByClassName("eben")[0];
function fonk10() {console.log(x.style.cssText)

    if (x.style.cssText === "display: inline-block;") {
        x.style.cssText = "display: none;"
    } else {
        x.style.cssText = "display: inline-block;";
    }
}
.eben,#eben{
  background:green;
  padding:5px;
  display:inline-block;
}
<div id="eben" onclick="fonk10()">BUTTON1</div>
<div class="eben"  style="display: inline-block;">BUTTON2</div>

CSSStyleDeclaration.cssText, The cssText property of the CSSStyleDeclaration interface returns or sets the text of the element's inline style declaration only. Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, from Testing to Security. Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, from Testing to Security.

Create a Boolean variable explain your element status let us call it show , according to the element if it is displayed then show will be true else if hidden and make the validation with this variable

var show=true;
var x = document.getElementsByClassName("eben")[0];
 function fonk10() {
if (show===false) {
    x.style.cssText = "display:inline-block";
show=true;
    } else {
        x.style.cssText = "display:none";
        show=false;
     }
  }

ElementCSSInlineStyle.style, cssText = '' or elt.setAttribute('style', '') sets the complete inline style for the element by overriding the existing inline styles. Note that the  The goal is to have a container element which holds both sections of text. When that element is moused over it gets assigned the pseudoclass :hover . Using this selector, you can re-style the children (below, .first and .second ) appropriately.

Style cssText Property, Set the style for a <p> element: document.getElementById("myP").style.cssText = "background-color:pink;font-size:55px;border:2px dashed green;color:white;". How to toggle text inside and element on click using jQuery. Topic: JavaScript / jQuery Prev|Next. Answer: Use the jQuery text() method.

How To Toggle Text, Learn how to toggle text with JavaScript. Toggle Text. Hello. Toggle Text of an Element. Step 1) Add HTML: Example. <button onclick="myFunction()">Click  I’m using array with length=2 for that purpose. The first element of the array is the current text value. Second element actually swaps the text value, using the new value from the data attribute. As we already stored the initial value as first element in the array, we immediately access it via [0].

CSS StyleDeclaration cssText Property, How to Toggle an Element Class in JavaScript ? The cssText property is used to set or return the value of an inline style declaration of an element. Syntax:. Implementing A Pure CSS Collapsible. Collapsible widgets are a popular way to create sections of content that can contract and expand. There are a ton of different implementations out there. Here, thanks to checkbox input elements, label elements and the :checked pseudo-selector, we’ll be able create such widget without the need for extra JavaScript.

Comments
  • Hint: add console.log(x.style.cssText) before the if and make sure it matches exactly what you have after the ===.
  • because there is a space and ; : display: none; and honestly this is the wort way to read CSS
  • possible duplicate of : stackoverflow.com/questions/6338217/…
  • unfortunately it's not related to the question.
  • it's 100% related to the question. The duplicate question will show you the exact way to read CSS property and use them
  • i know this way but i use multiple css property.
  • thank you so much. codes are exactly what i want and it works fine.
  • @novruzrhmv, you are most welcome :)
  • if you keep the initial if else we don't need inline style because we will fall into the else and starting from there we will have inline styles
  • thanks lot! it's working. i try and i found that i don't need inline style and console log, very thanks again.
  • While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please include an explanation for your code, as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.