CODEWITHSUNDEEP
javascriptjquery
James
James

Reputation: 132

Display/Hide DIV’s by using button js function

For the moment to show or hide the div table, I have to click each div field. Additionally, I wanted to have the same kind of approach by clicking the button “enable/disable” to show or hide all div tables at once (instead of clicking one by one):

What will be the best solution, is there a simple way to use the same script based on the class level? Thank you for all your explanation and support.

function showHidDIV(elemid,buttid){
      if (document.getElementById(elemid).style.display == 'none'){
         $("#"+elemid).slideDown(500);
         document.getElementById(buttid).style.backgroundColor='blue';
         document.getElementById(buttid).title=document.getElementById(buttid).title.replace('show','hide');
                            
      } else {
        $("#"+elemid).slideUp(500);
        document.getElementById(buttid).style.backgroundColor='black';                
      document.getElementById(buttid).title=document.getElementById(buttid).title.replace('hide','show');
                        }
                    }
        
.styleDivS {
  padding: 5px;
  cursor:pointer;
  font-weight:bold;
  background-color:blue;
  color: white;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<button onclick="showHidDIV()">enable/disable</button> 
<br/> <br/> <br/>

<table>
  <tr>
    <td>
      <div id="test" class="styleDivS" onClick="showHidDIV ('testdiv','test');" title="hide">TEST</div></td>

    <td>
      <div id="test2" class="styleDivS" onClick="showHidDIV('testdiv2','test2');">TEST 2</div>
    </td>
  </tr>
</table>

<div class="container showHidDIV" id="testdiv">
  <table>
    <h2>Test</h2>
  <thead>
      <tr><th></th></tr>
  </thead>
  <tbody>
      <tr><td></td></tr>
  </tbody>
 </table>
</div>
            
<div class="container showHidDIV" id="testdiv2">
  <table>
    <h2>Test 2</h2>
    <thead>
      <tr><th></th></tr>
    </thead>
    <tbody>
      <tr><td></td></tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Views: 57

Answers (2)

Swati
Swati

Reputation: 28522

Whenever your styleDivS button gets clicked you can get data-title values and depending on this slideUp/slideDown your divs .Now, for all button you need see if the data-status value is to show/hide depending that value you can simply show your hide your divs . Also, you need to change data-attribute as well for other button .

Demo Code :

$(".styleDivS").on("click", function() {
  var to_open = $(this).data("open") //get data_attr
  var expanded = $(this).attr("title") == "hide" //ge ttitle..
  $("#" + to_open)[expanded ? 'slideUp' : 'slideDown'](500)
  $(this).toggleClass("active") //toggle clas..
  $(this).attr("title", expanded ? "show" : "hide") //change title
})
$(".all").on("click", function() {
  var condition = $(this).data("status") == "hide"
  $(".showHidDIV")[condition ? 'slideUp' : 'slideDown'](500)
  $(this).data("status", condition ? "show" : "hide")
  $(".styleDivS").attr("title", condition ? "show" : "hide")

    !condition ? $(".styleDivS").addClass("active") : $(".styleDivS").removeClass("active") //add remove active..
  $(this).text(condition ? "ENABLE" : "DISABLED") //change button text
})
.styleDivS {
  padding: 5px;
  cursor: pointer;
  font-weight: bold;
  background-color: black;
  color: white;
}

.active {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!--added data-status-->
<button class="all" data-status="hide">enable/disable</button>
<br/> <br/> <br/>

<table>
  <tr>
    <td>
      <!--added data-open-->
      <div id="test" class="styleDivS active" data-open="testdiv" title="hide">TEST</div>
    </td>

    <td>
      <div id="test2" class="styleDivS active" data-open="testdiv2" title="hide">TEST 2</div>
    </td>
  </tr>
</table>

<div class="container showHidDIV" id="testdiv">
  <table>
    <h2>Test</h2>
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

<div class="container showHidDIV" id="testdiv2">
  <table>
    <h2>Test 2</h2>
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Paul
Paul

Reputation: 99

You can add in your css

body.hide .showHidDIV {
 display: none
}

And whenever you want to hide all the divs, use document.body.classList.add("hide"); which will add the display:none propertie to all the elements with the class showHidDIV contained in the body of your document.

And use document.body.classList.remove("hide"); to show them back.

Upvotes: 0

Related Questions