What causes inline CSS and internal CSS to exhibit different behaviors?

Question

What causes inline CSS and internal CSS to exhibit different behaviors?

It’s kind of strange that I have to click twice to see Foo’s content, but only once to see Bar’s content. The main difference seems to be that Foo’s content has internal style while Bar has inline style.

<html>

<head>
  <style>
    .content {
      display: none;
    }
  </style>

  <script>
    function showHide(element) {
      sibling = element.nextElementSibling;
      if (sibling.style.display == "none")
        sibling.style.display = "block"
      else sibling.style.display = "none";
    }
  </script>
</head>

<body>
  <h1 onclick="showHide(this)">Foo</h1>
  <div class="content">
    Foo Content
  </div>

  <h1 onclick="showHide(this)">Bar</h1>
  <div style="display: none;">
    Bar Content
  </div>
</body>

</html>

You can find the code on jsfiddle here

I’m really interested in achieving the same behavior with internal CSS or external CSS that I currently have with inline CSS. Do you think this is possible? I know it might be a simple issue, but I’m not quite sure which concepts to explore further.

javascript html css

Answer 1

Answer №1

When accessing sibling.style.display in JavaScript, you will retrieve the inline display style of that particular element. If there is no inline display style defined, the result will be "". You can also obtain the computed style by visiting this link, but a more effective approach is to avoid directly setting styles in JavaScript and instead manipulate classes:

function showHide(element) {
    const sibling = element.nextElementSibling;
    sibling.classList.toggle("content-hidden");
}

.content-hidden {
    display: none;
}

<h1 onclick="showHide(this)">Foo</h1>
<div class="content-hidden">
    Foo Content
</div>

<h1 onclick="showHide(this)">Bar</h1>
<div class="content-hidden">
    Bar Content
</div>

If you are specifically targeting a scenario like this, you may want to consider using <details>:

.thing > summary {
  display: flex;
}

<details class="thing">
    <summary><h1>Foo</h1></summary>
    Foo Content
</details>

<details class="thing">
    <summary><h1>Bar</h1></summary>
    Bar Content
</details>

Answer 2

When accessing sibling.style.display in JavaScript, you will retrieve the inline display style of that particular element. If there is no inline display style defined, the result will be "". You can also obtain the computed style by visiting this link, but a more effective approach is to avoid directly setting styles in JavaScript and instead manipulate classes:

function showHide(element) {
    const sibling = element.nextElementSibling;
    sibling.classList.toggle("content-hidden");
}

.content-hidden {
    display: none;
}

<h1 onclick="showHide(this)">Foo</h1>
<div class="content-hidden">
    Foo Content
</div>

<h1 onclick="showHide(this)">Bar</h1>
<div class="content-hidden">
    Bar Content
</div>

If you are specifically targeting a scenario like this, you may want to consider using <details>:

.thing > summary {
  display: flex;
}

<details class="thing">
    <summary><h1>Foo</h1></summary>
    Foo Content
</details>

<details class="thing">
    <summary><h1>Bar</h1></summary>
    Bar Content
</details>

Answer 3

Answer №2

The problem arises from the fact that when you use sibling.style.display, it is referencing the style attribute rather than the computed style of the element. This is why clicking it again will work, as the first click sets the style to display: none, and a subsequent click will make it visible.

To overcome this, you can utilize the element's classList to toggle a class that controls visibility, like in this example.

function toggleVisibility(element) {
  sibling = element.nextElementSibling;
  sibling.classList.toggle('visible')
}

.content {
  display: none;
}

.visible {
  display: block;
}

<h1 onclick="toggleVisibility(this)">Foo</h1>
<div class="content">
  Foo Content
</div>

<h1 onclick="toggleVisibility(this)">Bar</h1>
<div class="content">
  Bar Content
</div>

Answer 4

The problem arises from the fact that when you use sibling.style.display, it is referencing the style attribute rather than the computed style of the element. This is why clicking it again will work, as the first click sets the style to display: none, and a subsequent click will make it visible.

To overcome this, you can utilize the element's classList to toggle a class that controls visibility, like in this example.

function toggleVisibility(element) {
  sibling = element.nextElementSibling;
  sibling.classList.toggle('visible')
}

.content {
  display: none;
}

.visible {
  display: block;
}

<h1 onclick="toggleVisibility(this)">Foo</h1>
<div class="content">
  Foo Content
</div>

<h1 onclick="toggleVisibility(this)">Bar</h1>
<div class="content">
  Bar Content
</div>

What causes inline CSS and internal CSS to exhibit different behaviors?

Answer №1

Answer №2

Similar questions

Searching for Bluetooth devices using React Native

What is the best way to modify CSS animation property without causing any disruptions?

Tips for personalizing the FileField in wtforms to function as an image button

Checking for similarities between two string arrays to determine if there are any matching values using JavaScript and jQuery

Creating a clickable image in the header of an R Shiny app

Updating the state of a React component through a button click using React-JS

Looking to conduct date comparisons within angular-ui-grid?

Updates made to CSS are not reflecting on the error 404 page

Issue with Ionic toggles not updating the correct local storage entry

The powerful combination of Ajax and Django creates a dynamic Like button

Progressing through the Material UI LinearProgress bar in steps

Conceal HTML components on certain devices

Ways to make an image wander aimlessly across a webpage while also spinning as it moves (with the help of jQuery or CSS)

Alert: CSS 4.0 Warning Validation - The value "rgb(0, 0, 0, 0.4)" is not valid for the "border" property

What steps can be taken to ensure that the scale() function is given the highest priority

The image appears uniquely sized and positioned on every screen it is viewed on

Having trouble getting a background image to show up using node.js?

Retrieving a Table Row from a TableView in Titanium Mobile

PHP and MySQLi for inserting records into database

The v-list-group does not automatically expand sub-groups based on the path specified in the group prop