CODEWITHSUNDEEP
javascripthtmlcssonclickonclicklistener
Akira
Akira

Reputation: 2870

Toggle visibility of the current element

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>

Upvotes: 3

Views: 1226

Answers (4)

s.kuznetsov
s.kuznetsov

Reputation: 15213

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>

Upvotes: 2

Jerry Ben
Jerry Ben

Reputation: 320

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>

Upvotes: 1

dev-cyprium
dev-cyprium

Reputation: 768

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>

Upvotes: 1

farbod Aliakbari
farbod Aliakbari

Reputation: 49

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>

Upvotes: 1

Related Questions