I have a listbox
<div id="listboxid1" class="listboxFilters">
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">test2</div> <div class="listboxChosenFilter">3</div> </div>
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">test</div> <div class="listboxChosenFilter">*</div> </div>
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">gro</div> <div class="listboxChosenFilter">2</div> </div>
</div>
its a normal listbox, the question is now , how can I only set one element to active , and the others then to inactive
my first guess was an onlick on an item, I add a classname named active and before I would do a foreach for the listboxid1 element and set all to inactive, but is this really the common and best way?? :
<script>
function clearAll(element) {
element.each(function () {
var checkboxes = $(this).children("div");
checkboxes.each(function () {
var checkbox = $(this);
checkbox.removeClass("active");
});
});
}
jQuery.fn.multiselecter = function () {
$(this).each(function () {
var checkboxes = $(this).children("div");
checkboxes.each(function () {
var checkbox = $(this);
checkbox.click(function () {
clearAll(checkbox.parent());
checkbox.addClass("active");
});
});
});
};
$("#listbox1").multiselecter();
</script>
I guess you are using jQuery, so try this functions:
On click on anyitem with class .listboxFilterItem call setActive function
$('.listboxFilterItem').click(setActive($(this)));
function setActive(var elem){
$('.listboxFilterItem').each(function(){
$(this).removeClass('active');
});
elem.addClass('active');
}
Try this:
$(".listboxFilterItem").click(function (e) {
$(".listboxFilterItem").removeClass("active");
// or $(".active").removeClass("active");
$(this).addClass("active");
});
Check this on jsfiddle
$(this) - element, which was clicked
$(this).siblings() - all his neighbours, except himself.
$(".listboxFilterItem").click(function () {
$(this).addClass("active").siblings().removeClass("active");
});
Related
I've the below html and the div containing class tabHeader is not expanding/collapsing at all.
<div class="tabHeader">
<li>1JL(Mobile)</li>
<div class="insideTabHeader">
<li>Network</li>
<li>Application</li>
<li>Integration</li>
<li>Infrastructure</li>
</div>
</div>
Have written the below jquery to collapse/expand the div tabHeader
$("#tabHeader").click(function () {
$tabHeader = $(this);
$insideTabHeader = $tabHeader.next();
$insideTabHeader.slideToggle(500, function () {
});
});
I'm not sure why the above jquery isn't working. Any help/solution would be of great help.
Thanks in advance.
1- Use the anchor id or class instead of the div
2- use $tabHeader.closest('li').next(); instead of $tabHeader.next();
$("#onejltab").click(function () {
$tabHeader = $(this);
$insideTabHeader = $tabHeader.closest('li').next();
$insideTabHeader.slideToggle(500, function () {
});
});
Demo
$("#onejltab").click(function () {
$tabHeader = $(this);
$insideTabHeader = $tabHeader.closest('li').next();
$insideTabHeader.slideToggle(500, function () {
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabHeader">
<li>1JL(Mobile)</li>
<div class="insideTabHeader">
<li>Network</li>
<li>Application</li>
<li>Integration</li>
<li>Infrastructure</li>
</div>
</div>
I am writing a function where I want to remove an active class from all elements and add it to the one which was just clicked. Problem is that when I click the element all of them get the active class. Please see the code below.
var pagination = $('.pagination div');
function pager() {
pagination.removeClass('active', function(){
$(this).addClass('active');
});
}
$('.pagination div').on("click", function (){
pager();
});
I could use the code below, which works actually, but the reason I want to use the above one is to have possibility adding other functions in it which will be called later on click.
$('.pagination div').on('click',function(){
$('.pagination div').removeClass('active');
$(this).addClass('active');
});
HTML if needed
<div class="pagination">
<div class="pagination1"></div>
<div class="pagination2"></div>
<div class="pagination3"></div>
<div class="pagination4"></div>
</div>
By using a separate function, you are losing your reference to the current object (this). You will need to use a parameter to get your way working.
function pager(element) {
pagination.removeClass('active', function(){
element.addClass('active');
});
}
$('.pagination div').on("click", function (){
pager($(this));
});
I want to use the above one is to have possibility adding other
functions in it which will be called later
Try this:
function pager(el) {
pagination.removeClass('active', function(){
$(el).addClass('active');
});
}
$('.pagination div').on("click", function (){
pager(this);
});
$('div.pagination').on('click', 'div', function(){
$(this).addClass('active').siblings().removeClass('active');
});
How about this:
var pagination = $('.pagination div');
function pager(selector) {
$('.pagination div').removeClass('active');
$(selector).addClass('active');
}
$('.pagination div').on("click", function (){
pager(this);
});
var pagination = $('.pagination div');
function pager(that) {
pagination.removeClass('active', function(){
that.addClass('active');
});
}
$('.pagination div').on("click", function (){
pager($(this));
});
Editable JSFiddle
HTML
<div class="pagination">
<div class="pagination1">Pagination 1</div>
<div class="pagination2">Pagination 2</div>
<div class="pagination3">Pagination 3</div>
<div class="pagination4">Pagination 4</div>
JavaScript
$(function() { // DOM loaded event handler
function pager (element) {
$(".pagination div").removeClass("active");
element.addClass("active");
}
$(".pagination div").click(function() {
var element = $(this);
pager(element);
});
});
CSS
.active {
color : red;
}
I used your function in 2 steps :
First, I remove all active class by using $(".pagination div").removeClass("active"); which actually apply this effect on all sub div
then, I use the element passed through parameter to the function to scope it, and be able to add the proper class
Use id for all the element then add active class to each element which has been click or use e.target this will track the current element
$('.pagination').click(function(e){
$('.pagination').removeClass('active');
$(e.target).addClass('active');
});
I have a dropdown-menu, Class View is my default option.
When I clicked on the arrow, I have this
I tried to hide Class View option, and set Geary, Mia as my default option. I couldn't get it to hide.
HTML
<div class="row cb-btns-row " style="background-color:white;">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span>Class View </span>
<ul class="dropdown">
<li><a id="class-view" href="#">Class View</a>
</li>
<li><a id="student#1" class="student" href="#">Geary, Mia</a>
</li>
</ul>
</div>
</div>
</div>
JS
// dropDown Menu
function dropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
dropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
$(this).toggleClass('active');
return false;
});
obj.opts.on('click', function () {
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue: function () {
return this.val;
},
getIndex: function () {
return this.index;
}
}
$(function () {
var dd = new dropDown($('#dd'));
$(document).click(function () {
$('.wrapper-dropdown-1').removeClass('active');
});
var $student = $('.student');
var $classView = $('.classView');
$classView.hide(); // I tried
});
What I have
Live Result = http://jsfiddle.net/bheng/8cnz2r67/1/show
Live Code = http://jsfiddle.net/bheng/8cnz2r67/1/
You have mistaken the jquery selector for class-view which is id and not class. So put # instead of . and then hide it's parent li using closest(). Also to set the default value, set student's text in first span under .wrapper-dropdown-1
var $student = $('.student');
var $classView = $('#class-view');//its id and not class
$classView.closest('li').hide(); //hide parent li
//set default as student
$('.wrapper-dropdown-1').find('span:first').text($student.text());
JSFiddle Demo
Here a working demo: http://jsfiddle.net/8cnz2r67/9/
Javascript
dropDown.prototype = {
//...
setDefault: function(def) {
this.placeholder.text(def)
}
}
In the document.ready:
var dd = new dropDown($('#dd'));
dd.setDefault($(".default").text())
And just add a default class to the element that you wanna set to default.
Hope it helps you! ;)
You can try following by replacing
$classView.hide(); // I tried
with
$('.wrapper-dropdown-1').addClass('active');
$student.click();
JSFiddle Demo
<div class="unique1">Blabla1</div>
<div class="amministrazione">Amministrazione</div>
some link
some link
<div class="didattica">Didattica</div>
some link
<div class="unique2">Blabla2</div>
<div class="amministrazione">Amministrazione</div>
some link
<div class="didattica">Didattica</div>
some link
some link
<div class="unique3">Blabla3</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>
<div class="unique4">Blabla4</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>
some link
I'd like to have .amministrazione, .didattica and all the links on display:none by default. When user clicks on .unique1 or .unique2 or .unique3 or .unique4 (only) the next .amministrazione AND .didattica slidetoggle down.
Here's what I have so far.. but it's not toggling the correct elements:
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
var index = $(this).index(),
newTarget = jQuery('.amministrazione, .didattica').eq(index).slideDown();
jQuery('.amministrazione, .didattica').not(newTarget).slideUp();
});
});
http://jsfiddle.net/2rgqpzpt/
Use nextAll with the :first selector to target the appropriate divs:
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
jQuery('.amministrazione, .didattica').slideUp();
jQuery(this).nextAll('.amministrazione:first, .didattica:first').stop().slideDown();
});
});
Fiddle 1
You could accomplish the same thing using nextUntil:
jQuery(function () {
var un= jQuery('.unique1, .unique2, .unique3, .unique4');
un.click(function () {
jQuery('.amministrazione, .didattica, a').slideUp();
jQuery(this).nextUntil(un).stop().slideDown();
});
});
Fiddle 2
You can change your code with
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
var index = $(this).index(),
newTarget = $(this).next('.amministrazione');
newTarget= newTarget.add(newTarget.next());
newTarget.slideDown()
jQuery('.amministrazione, .didattica').not(newTarget).slideUp();
});
});
I have a sample code
On Html:
<div id="item-1-desc">ABC</div>
<div id="item-2-desc">DEF</div>
<div id="item-3-desc">XYZ</div>
And jquery:
$('div[id^=item-][id$=-desc]').hide().before('More');
$('a#toggle-desc').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
if($this.hasClass('see-more')){
$this.text('More');
} else {
$this.text('Close');
}
$('div[id^=item-][id$=-desc]').slideToggle(200);
});
When I click on more, it open all div(http://jsfiddle.net/3v25guz6). How to click only show a item desc ?
You have to target only the div which is next sibling of the clicked a so
$(this).next('div').slideToggle(200);
Also, id of an element must be unique, so for the dynamically added elements use the class to register the click handler
$('div[id^=item-][id$=-desc]').hide().before('More');
$('.see-more').click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
$this.text($this.hasClass('see-more') ? 'More' : 'Close');
$(this).next('div[id^=item-][id$=-desc]').slideToggle(200);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="item-1-desc">ABC</div>
<div id="item-2-desc">DEF</div>
<div id="item-3-desc">XYZ</div>
http://jsfiddle.net/3v25guz6/2/
$('div[id^=item-][id$=-desc]').hide().before('More');
$('a#toggle-desc').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
if ($this.hasClass('see-more')) {
$this.text('More');
} else {
$this.text('Close');
}
$this.next().slideToggle(200);
});