Search code examples
javascriptjqueryhtmlslidetoggle

Dynamic slideToggle function with given html class id parameters


I have a question about to creating dynamic jquery slideToggle function. I have html template as below:

<h4 id="client" class="section-title">
 <div class="sect-icon"></div> 
 <span>Client Info</span> </h4>
    <div class="form-row" id="client_data">
      <div class="form-group col-md-4">
        <label for="id_client_name">Name</label>
        <input class="form-control" disabled value="{{client.client_name}}">
      </div>
     </div>

And jQuery function as :

$(document).ready(function () {
$("#client").click(function () {

    if ($('#client_data').is(':visible')) {
        $("#client").removeClass("section-title");
        $("#client").addClass("section-title closed");
    } else {
        $("#client").removeClass("section-title closed");
        $("#client").addClass("section-title");
    }
    $("#client_data").slideToggle("fast");
    });

It is work . But this jQuery function is only for concreate html class. If i append another class to html ,then i should be copy this jQuery and past and edit id part. But i want to write one jQuery function for dynamic html id. I mean how i can use above jQuery function for below html without creating new jQuery

 <h4 id="equip" class="section-title">
  <div class="sect-icon"></div> <span>Calibrated Equipment</span></h4>
    <div class="form-row" id="equip_data">
       <div class="form-group col-md-4">
          <label for="id_brand_name">Brand</label>
          <input class="form-control" disabled value="{{equip.brand_name}}">
       </div>
  </div>

Solution

  • When I was a university student, a teacher told us that repeated code is called "function":

    function myStuff(idText) {
        $("#" + idText).click(function () {
    
        if ($('#' + idText + "_data").is(':visible')) {
            $("#" + idText).removeClass("section-title").addClass("section-title closed");
        } else {
            $("#" + idText).removeClass("section-title closed").addClass("section-title");
        }
        $("#" + idText).slideToggle("fast");
    }
    

    And you pass the id to myStuff whenever you want, like:

    $(document).ready(function () {
        myStuff("client");
    });