I am trying to add a search function to a bootstrap accordion that is used for FAQ.
So far, i can't get it to search properly.
JQuery
$(document).ready(function(){
$("#searcher").on("keypress click input", function () {
var val = $(this).val();
if(val.length) {
$(".accordion .card .collapsed").hide().filter(function () {
return $('.card-body', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1;
}).show();
}
else {
$(".accordion .card .collapsed").show();
}
});
});
<div class="search-container">
<input class="input-medium search-query" id="searcher" placeholder="Search">
<button class="btn">Search</button>
</div>
<br>
<div class="row">
<div class="col-sm-12">
<div class="tab-content">
<div id="tab1" class="tab-pane fade show active">
<div class="accordion" id="accordion1">
<div class="card">
<div class="card-header collapsed" id="genOne">
<a href="#collapseOne" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
<p class="mb-0">
Where are you located?
</p>
</a>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="genOne"
data-parent="#accordion1">
<div class="card-body">
<p style="text-align:center; font-size: 16px; ">We are located in , near the downtown area. To learn about local pick
up
options please contact us
at
<br /> support#
or
by phone 616
</p>
That is all of the code im using, if someone can point me in the right direction that would be awesome!
Thank you
Related
I got some successful answers from these links.
https://stackoverflow.com/a/68485231/1620626
https://stackoverflow.com/a/68489529/1620626
Now I want to put them together. But it seems to have some problems in slicing the numbers and put them in a div. Here's my work:
$('#mx_input,#num_list').hide();
$('.accordion-header').on('click', function() {
var tabID = $(this).find('button').data('mx');
$('#mx_input').show();
$('#mx_input').attr('max', tabID); //assign max=data-mxlen
});
$("#mx_input").on("input", function() {
$('#num_list').show();
let $el = $(this);
var mxlen = $el.attr("max");
var input = $el.val();
if (input.length >= mxlen) {
$('#num_list').append('<li>' + input.slice(0, mxlen) + '</li>');
$el.val('');
}
});
ul#num_list {
border: solid 1px red;
border-radius: 5px;
padding: 5px;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" data-mx="999">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
body 1
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" data-mx="99">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
body 2
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" data-mx="9">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
body 3
</div>
</div>
</div>
</div>
<input type="number" name="mxlen" min="0" max="" id="mx_input" />
<ul id="num_list"></ul>
The problems are:
Number is not slice as it expect on criteria if (input.length >= mxlen) {
As number from (1) not sliced. Then no append on destination div.
Here is the link you can easily edit : https://jsfiddle.net/c8jb1hkx/
Your code works as expected. In your HTML you have max length set as 9,99, 999. If you want it to be maximum number after that you need to append the list you need to change max length to 1, 2 and 3 respectively in your HTML. Also convert mxlen to number before comparing.
JSFiddle
Or update code to compare lengths of both input and data length -
JSFiddle
I'm trying to toggle between plus and minus icon for bootstrap accordion. On default, plus icon is showing. When accordion collapses, it shows the minus icons and hides the plus icon. I don't know if what I'm saying makes sense but it's really basic for some of you. I'm just a beginner.
I've tried doing it with css with :after and content "+" and content "-" but this is not what I want. I need to use font awesome. I've also tried the js way.
<script>
$(document).ready(function(){
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
</script>
<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content container-fluid">
<legend><?php echo $header_title; ?></legend>
<br>
<div class="row">
<div class="col-md-12 accordion-container">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0" style="margin: 10px !important">
<button id="btnCollapse" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fa fa-plus"></i>
Card Info
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<!-- SOME CONTENT -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I don't know how to check where I went wrong. All I want is to show the plus and minus icon
$(document).ready(function() {
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function() {
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function() {
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
/*$("#btnCollapse").on("click", function() {
$(".fa-plus").toggleClass("fa-minus");
})
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content container-fluid">
<legend>
<?php echo $header_title; ?>
</legend>
<br>
<div class="row">
<div class="col-md-12 accordion-container">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0" style="margin: 10px !important">
<button id="btnCollapse" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Card Info
<i class="fa fa-plus"></i>
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<!-- SOME CONTENT -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
You can use alternate solution as follow:
$(document).ready(function(){
// Add minus icon for collapse element which is open by default
$(".collapse.show").each(function(){
$(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
Alex, your code is working fine. Please check this fiddle.
[https://jsfiddle.net/boilerplate/bootstrap][1]
Please make sure your js code must be written after the jquery.js and bootstrap.js loaded.
I am trying to show/hide multiple div's using multiple checkboxes.
i.e. if a checkbox is checked it must target div using id or name and the div contents should be hidden.
Tried the following work but unable to achieve the required goal
<form id="varsection">
<div class="panel box box-primary">
<div id="controlledvariables" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="box-body">
<div class="col-md-9">
<div class="row secrow">Wave</div>
<div class="row secrow">Gender</div>
</div>
<div class="col-md-1">
//if input name="Wave[]" is selected then
<div class="row secrow" style="text-align: center;">
<input type="checkbox" name="Wave[]" value="top">
</div>
<div class="row secrow" style="text-align: center;">
<input type="checkbox" name="Gender[]" value="top">
</div>
</div>
</div>
</div>
</div>
</form>
<form id="filters">
<div>
//show this div
<div class="panel box box-primary">
<div class="box-header with-border">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Wave" aria-expanded="false" class="collapsed">
Wave
</a>
</h4>
</div>
<div id="Wave" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="box-body">
<div class="col-md-8">
</div>
<div class="col-md-4">
//or this one
<ul>
<li><input type="checkbox" name="Wave_fiters[]" value="1">Wave-1</li>
<li><input type="checkbox" name="Wave_fiters[]" value="2">Wave-2</li>
</ul>
</div>
</div>
</div>
</div>
[Other multiple div's]
</div>
</form>
jQuery
jQuery(function() {
var checks = $("[name='_Wave[]']");
checks.click(function() {
if (checks.filter(':checked').length == checks.length) {
$("[name='_Wave[]']").show();
} else {
$("[name='_Wave[]']").hide();
}
}).triggerHandler('click')
})
you have 2 problems with this code:
first the jquery selector is wrong it should be like this:
var checks = $("[name='Wave[]']");
without _
second you need to give the div you want to toggle a unique id or a class name
so your code should be like this
jQuery(function () {
var checks = $("[name='Wave[]']");
checks.click(function () {
if (checks.filter(':checked').length == checks.length) {
$(".waveDiv").show();
} else {
$(".waveDiv").hide();
}
}).triggerHandler('click')
})
and this is your input:
<input type="checkbox" name="Wave[]" value="top">
and your div which will be toggled:
<div class="waveDiv panel box box-primary">
I have the following HTML:
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<a class="panel-heading collapsed" role="tab" id="headingOne"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
<h4>Add Data</h4>
<i class="fa fa-chevron-circle-down"></i>
</a>
<div id="collapseOne"
class="panel-collapse collapse in"
role="tabpanel"
aria-labelledby="headingOne">
<div class="panel-body">
Content Here
</div>
</div>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
and the following JavaScript using jQuery:
$('.multi-field-wrapper').each(function () {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function (e) {
$('.multi-field:first-child', wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function () {
if ($('.multi-field', $wrapper).length > 1) {
$(this).parent('.multi-field').remove();
}
});
});
The problem is, when collapsible is only one the href="#collapseOne will target tabpanel collapseOne, but when I've added one or more multi-fields the href="#collapseOne" will target all tabpanel's id because it has same name.
Is there any way to make the #href and tabpanel's id different each time we press the 'Add field' button or using this alternative script at this jsfiddle?
I have checkbox with its original behaviour. I wanted to add + and - symbols to it while expanding and collapsing those checkbox.
Can any one please tell me how can I achieve this ?
Following is my Code in jade:
.form-group
.checkbox#some-checkbox(style="margin-left: 10px;")
label(data-toggle='collapse', data-target='#collapseOne', aria-expanded='false', aria-controls='collapseOne')
input(type='checkbox')
| My Name
#collapseOne.collapse(aria-expanded='false')
.well1
.row
.col-sm-12.col-lg-12
.nutrition-category
.row.header3.margin-left-10
.row.paragraph
.col-xs-6(style="font-size: 18px;") New Name
Non Jade (HTML) Code:
<div class="form-group">
<div class="checkbox" id="some-checkbox" style="margin-left: 10px">
<label data-toggle="collapse" data-target="#collapseOne" aria-
expanded="false" aria-controls="collapseOne">
<input type="checkbox"/> My Name
</label>
</div>
</div>
<div class="collapse" id="collapseOne" aria-expanded="false">
<div class="well1">
<div class="row">
<div class="col-sm-12 col-lg-12">
<div class="nutrition-category">
<div class="row header3 margin-left-10">
<div class="row paragraph">
<div class="col-xs-6" style="font-size: 18px"> New
Name</div>
</div>
</div>
</div>
</div>
</div>
and here is the javascript that i have used for it:
script(type='text/javascript').
$(document).ready(function() {
$("#some-checkbox").prop("indeterminate", true);
});