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>
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");
});