Currently I have a onclick function that toggles a view in my html using .slideToggle(). But whenever I press the button to trigger this event, it doesnt do anything. Here is my code:
<a href="javascript:void(0)" class="btn btn-default btn-sm" id="searchwrap"><i class="fa fa-search"></i> Search</a>
<div class="col-sm-12 searchwrap" id="searchbox" style="display:none">
<fieldset>
<div class="card-box bg-lightdark border-3">
<div class="container">
<div class="row form-group">
<div class="col-sm-3">
<label>Type</label>
<select id="ftype" class="form-control filter" name="ftype" data-column="5">
<option value="">All Types</option>
</select>
</div>
<div class="col-sm-3 m-t-30">
<button type="button" id="btnsearch" name="btnsearch" class="btn btn-info btn-sm waves-inverse m-b-5"> Search <i class="fa fa-search"></i> </button>
<a class="btn btn-inverse btn-trans btn-sm waves-inverse m-b-5" id="reset">Reset</a></div>
</div>
</div>
</div>
</fieldset>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="application/javascript">
$(document).ready(function () {
$("#searchwrap").click(function(e){ ('.searchwrap').slideToggle(); console.log("press");});
});
I've also added a console.log("press") in the jquery and it doesnt show anything when clicked.
Fiddle: https://codesandbox.io/s/thirsty-night-w8j03?file=/index.html
Show your code :
<script type="application/javascript">
$(document).ready(function () {
$("#searchwrap").click(function(e){ ('.searchwrap').slideToggle(); console.log("press");});
});
You dont close script tag and you dont use jquery symbol for your searchwrap class.
Try this
<script type="application/javascript">
$(document).ready(function () {
$("#searchwrap").click(function(e){ $('.searchwrap').slideToggle(); console.log("press");});
});
</script>