CODEWITHSUNDEEP
javascriptjquerycsstypescripttoggle
Racergirl001
Racergirl001

Reputation: 17

How can I hide/show a div-container in JavaScript?

I'm trying to use the toggleClass method for hiding/showing a div-container by clicking a button. Therefore I use jQuery. It works when the class .hide is set to visibility: hidden.

However I want to make the div container .aufklapp-container visible when I'm clicking the button. For CSS I tried this:

.table { visibility: hidden } 
.hide { visibility: visible }

However the div-container doesn't change to visible. It stays hidden. Help me please, I don't get it.

$(document).ready(function() {
  $(".aufklapp-button").click(function() {
    $(".aufklapp-container").toggleClass("hide");
  });
});
.aufklapp-button {
  font-family: 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 30pt;
  text-align: center;
  color: white;
  background: #7F868D;
  padding: 5px 30px 10px 30px;
  width: 60%;
  border: none;
  border-radius: 35px;
  cursor: pointer;
}

.table {
  font-family: 'Segoe UI', sans-serif;
  font-size: 15pt;
  text-align: left;
  width: 60%;
  padding: 10px 30px 20px 40px;
  border-color: #8D0011;
  border-width: 2px;
  border-style: solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: white;
  visibility: hidden;
}

.table td {
  padding: 7px 20px 7px 20px;
}

.table td:nth-child(2) {
  width: 45%;
}

.hide {
  visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="container-button">
  <input class="aufklapp-button" type="button" value="Platzhalter für Kategorie"></input>
  <div class="aufklapp-container">
    <table class="table">
      <tbody>
        <tr>
          <td></td>
          <td>Zielerreichung in %</td>
        </tr>
        <tr>
          <td>Kriterium 1</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 2</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 3</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 4</td>
          <td>Regler</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Upvotes: 2

Views: 1419

Answers (2)

Daniel Mascena
Daniel Mascena

Reputation: 1

Another alternative besides the one given before would be change the code a little bit, changing the JavaScript code to this:

$(document).ready(function() {
  var aufklapp = $(".aufklapp-container");
  $(".aufklapp-button").click(function() {
    aufklapp.attr("hidden", aufklapp.attr('hidden') ? null : true);
  });
});

and adding the hidden attribute to the HTML element as <div class="aufklapp-container" hidden> and for the last on your CSS, remove the .hide class and the visibility: hidden; property from your .table class.

.table {
  font-family: 'Segoe UI', sans-serif;
  font-size: 15pt;
  text-align: left;
  width: 60%;
  padding: 10px 30px 20px 40px;
  border-color: #8D0011;
  border-width: 2px;
  border-style: solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: white;
}

.table td {
  padding: 7px 20px 7px 20px;
}

.table td:nth-child(2) {
  width: 45%;
}

This will give you 3 benefits to your code: (1) a better accessibility using the hidden attribute on the markup (you can use it with others ARIA attributes if is needed); (2) you cache your container through a reference, avoiding fetching it using the jQuery code $(".aufklapp-container") in every click; and (3) is one less CSS generic class in your codebase.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337656

The issue is because you've set visibility: hidden on the table element, not the parent .aufklapp-container, therefore toggling the class there does nothing. If you move the visibility property to the correct class in your CSS, the code works:

$(document).ready(function() {
  $(".aufklapp-button").click(function() {
    $(".aufklapp-container").toggleClass("hide");
  });
});
.aufklapp-button {
  font-family: 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 30pt;
  text-align: center;
  color: white;
  background: #7F868D;
  padding: 5px 30px 10px 30px;
  width: 60%;
  border: none;
  border-radius: 35px;
  cursor: pointer;
}

.aufklapp-container {
  visibility: hidden;
}

.table {
  font-family: 'Segoe UI', sans-serif;
  font-size: 15pt;
  text-align: left;
  width: 60%;
  padding: 10px 30px 20px 40px;
  border-color: #8D0011;
  border-width: 2px;
  border-style: solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: white;
}

.table td {
  padding: 7px 20px 7px 20px;
}

.table td:nth-child(2) {
  width: 45%;
}

.hide {
  visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="container-button">
  <input class="aufklapp-button" type="button" value="Platzhalter für Kategorie" />
  <div class="aufklapp-container">
    <table class="table">
      <tbody>
        <tr>
          <td></td>
          <td>Zielerreichung in %</td>
        </tr>
        <tr>
          <td>Kriterium 1</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 2</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 3</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 4</td>
          <td>Regler</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Also, just as an aside, it would make more sense to rename the hide class to show, as that better matches its behaviour.

Upvotes: 2

Related Questions