I have few div which is collapsed.
On click of div of each element it display the collapsed content. On second click only on the same div it toggle class 'is-collapsed' and hide the element content. What i need to do is to be able to close displayed content also when i click on one of the other div or somewhere outside.
Not sure about the exact java script but take the part that is working for the toggle class.
This is the code :
/* collapse */
$('.filter-collapse .box-heading').live('click', function() {
$(this).closest('.box').toggleClass('is-collapsed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters-collapse">
<div class="box sf-option sf-list sf-option-13 sf-multi is-collapsed">
<div class="box-heading">Sizes</div>
<div class="box-content">
<ul class="">
<li><label><input type="checkbox" name="option[13]" value="49"><span class="sf-name">S (2)</span> </label></li>
<li><label><input type="checkbox" name="option[13]" value="50"><span class="sf-name">M (1)</span> </label></li>
</ul>
</div>
</div>
<div class="box sf-option sf-list sf-option-14 sf-multi is-collapsed">
<div class="box-heading">Color</div>
<div class="box-content">
<ul class="">
<li><label><input type="checkbox" name="option[14]" value="55"><span class="sf-name">White (2)</span> </label></li>
<li><label><input type="checkbox" name="option[14]" value="54"><span class="sf-name">Red (1)</span> </label></li>
<li><label><input type="checkbox" name="option[14]" value="53"><span class="sf-name">Black (1)</span> </label></li>
</ul>
</div>
</div>
</div>
I suggest to use another event handler on the document, which adds the is-collapsed class to all collapsable elements - ignoring the box itself, if one was clicked.
/* collapse */
$(document).on("click", function(e) {
// add collapsed to all boxes, besides a box itself was clicked.
var currentTargetBox = $(e.target).closest('.filters-collapse .box');
$('.filters-collapse .box').not(currentTargetBox).addClass('is-collapsed');
});
$(document).on("click", '.filters-collapse .box-heading', function(e) {
// toggle is-collapsed
$(this).closest('.box').toggleClass('is-collapsed');
});
.box.is-collapsed .box-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters-collapse">
<div class="box sf-option sf-list sf-option-13 sf-multi is-collapsed">
<div class="box-heading">Sizes</div>
<div class="box-content">
<ul class="">
<li><label><input type="checkbox" name="option[13]" value="49"><span class="sf-name">S (2)</span> </label></li>
<li><label><input type="checkbox" name="option[13]" value="50"><span class="sf-name">M (1)</span> </label></li>
</ul>
</div>
</div>
<div class="box sf-option sf-list sf-option-14 sf-multi is-collapsed">
<div class="box-heading">Color</div>
<div class="box-content">
<ul class="">
<li><label><input type="checkbox" name="option[14]" value="55"><span class="sf-name">White (2)</span> </label></li>
<li><label><input type="checkbox" name="option[14]" value="54"><span class="sf-name">Red (1)</span> </label></li>
<li><label><input type="checkbox" name="option[14]" value="53"><span class="sf-name">Black (1)</span> </label></li>
</ul>
</div>
</div>
</div>
Related
I am using Bootstrap Toggle Library with Bootstrap4 but I have problems when I try to control that user only switch 'ON' a limited number of elements. Here is my HTML code:
<div style="border:solid border-width: 1px;">
<li class="ui-state-default">
<input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"data-onstyle="success" data-offstyle="danger">
Option 1
</li> </div>
All 11 elements has the same code, and my Jquery:
$('input[name="checkImg"]').on('change', function (e) {
if ($('input[name="checkImg"]:checked').length > 3 ) {
console.log("In Condition");
$(this).prop('checked', false);
}
});
Here is a photo of the result when I switch 4 elements to 'ON':
I can see that condition is right and detect when 3 elements are switch 'ON' but I cant disabled the rest of 'False' input until some of 'On' Elements switch to 'OFF'. Anyone can help?
In addition, I use disabled from bootstrap but not worked.
Thanks for all.
Edit:
https://jsfiddle.net/5vr0c3w2/14/
There is an error in your script.
try to change this:
$('input[name=checkImg]')
to this
$('input[name="checkImg"]')
I tried correcting this and the script seems to work now.
EDIT: I see the problem is with Bootstrap-toggle, that uses a different kind of approach for checking and unchecking checkboxes.
Instead of just unchecking the checkbox you also have to change its parent div's class from "btn-success" to "btn-danger off". Now this code snippet should work for you as well.
$('input[name="checkImg"]').on('change', function (e) {
if ($('input[name="checkImg"]:checked').length > 3 ) {
console.log("You can select no more than 3 options");
$(this).prop('checked', false);
$(this).parent().removeClass("btn-success");
$(this).parent().addClass("btn-default off");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<div class="container-fluid">
<!-- Primera Fila -->
<div class="col">
<div class="card">
<div class="card-header colorPlataforma">Imagenes Disponibles</div>
<div class="card-body fuenteTabla">
<div class="overflow">
<ul class="justify-content-center col-12 connectedSortable" id="sortable1">
<div style="border:solid border-width: 1px;">
<li class="ui-state-default">
<input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"
data-onstyle="success" data-offstyle="danger">
Option 1
</li>
</div>
<div style="border:solid border-width: 1px;">
<li class="ui-state-default">
<input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"
data-onstyle="success" data-offstyle="danger">
Option 2
</li>
</div>
<div style="border:solid border-width: 1px;">
<li class="ui-state-default">
<input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"
data-onstyle="success" data-offstyle="danger">
Option 3
</li>
</div>
<div style="border:solid border-width: 1px;">
<li class="ui-state-default">
<input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"
data-onstyle="success" data-offstyle="danger">
Option 4
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
I have step form with 3 steps. I want to get index of <li> in stepinstallment when <label> inside it selected to check:
If the first step is selected, it will change background color of circle class.
If the second and third step is selected without first step, it will display error message.
I've tried many ways on SO and write myself but it doesn't work.
This is my code
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment">
<ul>
<li id="step-one" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
JS
var sCircle = $('.steps ul li');
$('.step label').on('click', function(){
var $this = $(this),
sCircleIndex = parseInt(sCircle.index()),
sCircleChild = sCircle.children('div'),
currParent = $this.parents('ul').index();
console.log(currParent);
});
Above JS code always return 0. Hope anyone can figure me out this case. Thanks in advance.
Try using .closest()
$(".stepinstallment label").on("click", function() {
console.log($(this).closest("li").index())
});
$('.stepinstallment label').on('click', function(){
console.log($(this).closest("li").index())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment">
<ul>
<li id="step-one">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
I hope this example will help you out !!!
$("ul#wizard li").click(function () {
var index = $("ul#wizard li").index(this);
if(index!=0)
alert("error ")
else
alert("index is: " + index)
});
<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<p>Some random tag</p>
</ul>
$('.step label') will not return any elements, since there is no html matching the css selector
I can't see the .steps and .step class in your html.
with your html, I guess this code will work
$('.stepinstallment').on('click', 'label', function (e) {
var $this = $(this);
var li = $this.parents('li');
console.log(li.index());
});
the steps of the code:
get the label element
get the li element contain the label
get the index
There is no click on label... it is empty. You can bind click on checkbox, the find the index of li and base on it color the same index of LI in your circle UL:
var sCircle = $('.steps ul li');
$('input[type=radio]').on('click', function(){
var liIndex=$(this).parents('li').index();
if(liIndex>0){
alert('error')
}
else{
$('ul.clearfix>li:eq('+liIndex+')').css('background-color','red')
}
});
JSFIDDLE
$(document).ready(function(){
var sCircle = $('.steps ul li');
$('.step label').on('click', function () {
var currentLi = $(this).parents('li')[0];
currentLiIndex = -1;
sCircle.each(function (index) {
if (sCircle[index] == currentLi) {
currentLiIndex = index;
}
});
console.log(currentLiIndex);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment steps">
<ul>
<li id="step-one">
<h2>Choose your document</h2>
<div class="step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two">
<h2>Choose your document</h2>
<div class=" step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three">
<h2>Choose your document</h2>
<div class="step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
This is what you need to do.
$('.step-content label').on('click', function(){
var clickedId = $(this).parents('li').index();
if(clickedId == 0) {
$('.circle').css('background-color','yellow');
} else {
alert('error');
}
});
Working example in jsfiddle https://jsfiddle.net/1uxus551/
Can't seem to get it working trying to get slide function for next and prev slider does work without swipe of course. I am using swipeJs but with no success. here is the js...
$(document).ready(function(){
Slider = $('.slide-container').Swipe().data('Swipe');
$('.next').on('click', Slider.next);
$('.prev').on('click', Slider.prev);
});
and the html ...
<ul class="slides family animated">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slideM">
<div id="company-title" class="animated pulse"><h2>title</h2></div></br>
<p class="animated bounceInLeft">content.</p>
<p class="box animated four flipInX boxGreen">content</p>
</div>
<div class="nav">
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slideM">
<div id="family">
<p class="add-anim-up">content</p> </div></div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
</ul>
I want to auto-open the first tab when the modal shows (The first tab with "names=tabs"). Right now, I have to manually click the tab to show content.
Here is the HTML tabs and modals markup
<div class="col s12 m6 l3">
<div class="card">
<a class="modal-trigger" href="#abc">
<div class="card-image">
</div>
</a>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4"></span>
</div>
</div>
</div>
<div id="abc" class="modal">
<div class="row"><h4></h4></div>
<div class="row">
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab29" />
<label for="tab29"></label>
<div id="tab-content29" class="tab-content">
<p></p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab30" />
<label for="tab30"></label>
<div id="tab-content30" class="tab-content">
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab31" />
<label for="tab31"></label>
<div id="tab-content31" class="tab-content">
<p></p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab32" />
<label for="tab32">Contact</label>
<div id="tab-content32" class="tab-content">
</div>
</li>
</ul>
</div><!-- Container
And here is the JS that triggers a modal
$(document).ready(function(){
$('.modal-trigger').leanModal(
{
dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: .4, // Opacity of modal background
in_duration: 150, // Transition in duration
out_duration: 150, // Transition out duration
}
);
});
Since LeanMdal does not have a callback method you can probably achieve this by creating a separate click event like this
$('.modal-trigger').on("click", function(){
$('ul.tabs li:first').click();
})
Easiest would be to add whatever classes control tab visibility straight into the HTML. leanModal doesn't seem to support any sort of callbacks or events.
I have one drop-down with ul and li tag. It is working on click. I'm trying to open drop-down on mouse hover not a click. How can i achieve this.
<div class="ms-parent form-control">
<button type="button">
<span class="placeholder">Choose Anyone</span>
</button>
<div class="ms-drop bottom" style="display: none;">
<ul>
<li class="ms-select-all">
<li>
<label>
<input type="checkbox" value="Abu Dhabi" undefined="">
Computer
</label>
</li>
<li>
<label>
<input type="checkbox" value="Al Ain" undefined="">
Keyboard
</label>
</li>
<li>
</ul>
</div>
</div>
The output is like normal html select drop-down. But i am looking to open dropdown on mouse hover event.
$(document).ready(function(){
$('#btnToChoose').hover(
function () {
$('#content').show();
},
function () {
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ms-parent form-control">
<button type="button" name="btnToChoose" id="btnToChoose">
<span class="placeholder">Choose Anyone</span>
</button>
<div id='content' class="ms-drop bottom" style="display: none;">
<ul>
<li class="ms-select-all">
<li>
<label>
<input type="checkbox" value="Abu Dhabi" undefined="">
Computer
</label>
</li>
<li>
<label>
<input type="checkbox" value="Al Ain" undefined="">
Keyboard
</label>
</li>
<li>
</ul>
</div>
</div>
Change Design as per your convenience.
$('#btnToChoose')
.on('mouseenter', function () { $('#content').show(); })
.on('mouseleave', function () { $('#content').hide(); });