I have a page which allows users to comple one - three select boxes.
The first select box is shown on the page when it loads, then the user can click "Add filter 2/3/4"
See code below:
<div id="filter2"><a href="#">Add Filter 2</a></div>
<div id="filtertwo">
<label class="">Filter 2</label>
<select class="full-width" data-placeholder="Select Filter" name="filter2" data-init-plugin="select2">
<option value="test">Test</option>
<option value="test1">Test1</option>
</select>
<script>
$(document).ready(
function() {
$("#filter2").click(function() {
$("#filtertwo").toggle();
});
});
</script>
<style>
#filtertwo {
display: none;
}
</style>
The coding is the same for each of my select boxes. I would like to just show text "Add New Filter" only once, is this possible?
I have attached a screenshot so you can see my current page:
<div id="filter2"> <a id="filterLink" href="#"> Add New Filter </a> </div>
<script>
$(document).ready(function(){
$("#filter2").click(function() {
$("#filtertwo").toggle();
$("filterLink").hide();
$("filter2").innerHTML = "<a id='filterLink' href='#'> Add Filter 2 </a>";
});
});
</script>
Now Repeat the code innerHTML
how many time you want that link.
If i understand you properly. Consider following snippet:
$(document).ready(
function() {
$("#filter1,#filter2, #filter3").click(function() {
$('.filter').hide();
$(this).next('.filter').toggle();
});
});
If you want to show only one filter link:
$(document).ready(
function() {
$(".filter-link").click(function() {
$(".filter-link").hide();
$(".filter-link").not(this).show();
$('.filter').hide();
$(this).next('.filter').toggle();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.