切换当前元素的可见性

Question

I'm trying to write a function toggle_active to show the hidden content on a click, and collapse the content again on one more click. Sadly, it does not work. Could you help me modify it?

 function toggle_active(this){ var x = this.nextSibling; if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; }; }

 .daccord_b{ display:none; }

 <header class="ca_h" onclick="toggle_active(this);"> <i class="i i-plus ca_hi"></i> Title </header> <div class="had daccord_b">Hidden content</div>

Answer 1

Use method nextElementSibling to return the next element. And it is not necessary to use the if {} operator.

Don't use this for arguments in functions.

The more correct way for your task is method toggle() , which your class uses in css .daccord_b .

 function toggle_active(el) { var x = el.nextElementSibling; x.classList.toggle("daccord_b"); }

 .daccord_b { display: none; }

 <header class="ca_h" onclick="toggle_active(this);"> <i class="i i-plus ca_hi"></i> Title </header> <div class="had daccord_b">Hidden content</div>

Second solution using style.display .

 function toggle_active(el) { var x = el.nextElementSibling; x.style.display = x.style.display === 'block'? 'none': 'block'; }

 .daccord_b { display: none; }

 <header class="ca_h" onclick="toggle_active(this);"> <i class="i i-plus ca_hi"></i> Title </header> <div class="had daccord_b">Hidden content</div>

Answer 2

You're having some syntax errors in this code. First, I suggest you name the function arguments something other than this because this is a reserved keyword in JavaScript.

Secondly, I recommend consulting with W3School with such simple problems before reaching out, as most of the time, there is a simple solution:)

Here's a link that solves exactly the problem you're describing.

https://www.w3schools.com/howto/howto_js_collapsible.asp

And, here's an example and how you can achieve this:

 let content = document.getElementById("content"); function handleClick() { if (content.classList.contains("hide")) { content.classList.remove("hide"); } else { content.classList.add("hide"); } }

 .my-content { display: block; }.my-content.hide { display: none; }

 <button onclick="handleClick()">Toggle</button> <div class="my-content" id="content">Hello, some content</div>

EDIT If you decide to introduce jQuery to your project, you can achieve it even with fever lines of code:

 $("[data-collapse]").on('click', function () { let target = $(this).data('collapse'); $(target).toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button data-collapse="#content">Clicker</button> <div id="content"> My Content </div>

This makes it abstract and reusable, even allowing you to do things like separate containers:

 $("[data-collapse]").on('click', function () { let target = $(this).data('collapse'); $(target).toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button data-collapse="#target1">Collapse #1</button> <button data-collapse="#target2">Collapse #2</button> <div id="target1"> <h1>I'm Target #1</h1> </div> <div id="target2"> <h1>I'm target #2</h1> </div>

Answer 3

js:

function toggle_active(id){
      var x = document.getElementById(id);
      if (x.style.display === "none" || x.style.display === "") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      };
    }

html:

    <header class="ca_h" onclick="toggle_active('HiddenContent');">
   toggle
</header>
<div class="had daccord_b" id='HiddenContent'>Hidden content</div>

Answer 4

It is a good practice to use an Event object in you handler function when you can. Please read this post then try fixing your code accordingly: What exactly is the parameter e (event) and why pass it to JavaScript functions?

More about Event.currentTarget here: https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

 function toggle_active(evt){ var x = evt.currentTarget.nextElementSibling; x.classList.toggle('daccord_b'); }

 .daccord_b { display: none; }

 <header class="ca_h" onclick="toggle_active(event);"> <i class="i i-plus ca_hi"></i> Title </header> <div class="had daccord_b">Hidden content</div>