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);
});
Related
Visit this website: http://dev.giftsdesign.com.sg/product-list/0/0
I will expect the output like,
If I click one sidebar menu, others sidebar menus should be collapsed.
Before Click: <ul class="sidebar-submenu" style="display: none;">
After Click: <ul class="sidebar-submenu show" style="display: block;">
I think this is code for that,
$(document).ready(function() {
$('.sidebar-link').click(function(e) {
e.preventDefault();
var $this = $(this);
if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.next().slideUp(350);
} else {
$this.parent().parent().find('sidebar-submenu-item .sidebar-submenu').removeClass('show');
$this.parent().parent().find('sidebar-submenu-item .sidebar-submenu').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
}
});
How to modify to get expected output. Please help me!
Try this:
$('.sidebar-link').click(function (e) {
e.preventDefault();
$('.show').removeClass("show");
$('.show').css("style","none");
......
});
try this:
$(document).ready(function() {
$('.sidebar-link').click(function(e) {
e.preventDefault();
var $this = $(this);
document.querySelectorAll('.sidebar-link').forEach(el=> {
el.classList.remove('show')
});
e.classList.add('show');
$this.parent().parent().find('sidebar-submenu-item .sidebar-submenu').removeClass('show');
$this.parent().parent().find('sidebar-submenu-item .sidebar-submenu').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
});
I am trying to detect if a link was clicked with JS.
This is my code:
<div onclick="setLocation('http://domain.com/test')" class="gd-details" id="detail-box2">
<h2 class="gd-product-name">
<a title="test" href="http://domain.com/test">content 1</a>
</h2>
</div>
I'm also trying with this code and it doesn't works:
$(document).on("click", "a", function() {
var href = $(this).attr("href");
if(href == 'http://domain.com/test'){
alert('clicked');
} else {
alert('not clicked');
}
});
How do I detect if a specific link is clicked?
Add an event handler to the div click and compare the onclick attribute to your test url.
$(document).on("click", "div", function() {
var href = $(this).attr("onclick");
if(href === "setLocation('http://domain.com/test')"){
alert('clicked');
} else {
alert('not clicked');
}
});
I have multiple toggle elements on my page. I am trying to get them closed when clicking on the outside of the div element. the script i have now works veyr well with multiple elements but it also closes the div when clicking on inside of the div
<ul>
<li class="menuContainer">
<a class="top" href="#">Menu</a>
<div class="sub">
<a class="top" href="google.com">item in dropdown menu with valid url when clicked here div.sub should stay close</a>
</div>
</li>
<li class="menuContainer">
<a class="top" href="#">Menu</a>
<div class="sub">
<a class="top" href="#">item in dropdown menu when clicked here div.sub should stay open</a>
</div>
</li>
$(document).ready(function(){
$('li.menuContainer').each(function() {
var $dropdown = $(this);
$("a.top", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.sub", $dropdown);
$div.toggle();
$("li.menuContainer div.sub").not($div).hide();
$( "#effect" ).hide();
return false;
});
$("li.menuContainer div.sub").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function (){
$("li.menuContainer div.sub").hide();
});
});
what i want to do is to stop closing div when clicked inside of it. Any help please?
I think you are looking for e.stopPropagation();. Use it in an event on the child items.
This will stop the event from propagating to the parent div.
In your code the problem is inside the following function, now corrected:
$('html').click(function(event){
var ele = event.target.tagName + '.' + event.target.className;
if (ele != 'DIV.sub') {
$("li.menuContainer div.sub").hide();
}
});
Like you can see now when you click on whatever html element a check is done to prevent the undesired action.
use this code
$("li.menuContainer > a.top").click(function(e) {
e.preventDefault();
$div = $(this).next("div.sub");
$("li.menuContainer div.sub").not($div).slideUp();
$div.slideDown();
});
instead of
$('li.menuContainer').each(function() {
var $dropdown = $(this);
$("a.top", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.sub", $dropdown);
$div.toggle();
$("li.menuContainer div.sub").not($div).hide();
return false;
});
});
and about
$('html').click(function(){
$("li.menuContainer div.sub").hide();
});
you can use
$(window).on('click',function(e){
if (!$("li.menuContainer").is(e.target) // if the target of the click isn't the container...
&& $("li.menuContainer").has(e.target).length === 0) // ... nor a descendant of the container
{
$("li.menuContainer div.sub").slideUp();
}
});
Working Demo
Update:
$("div.sub > a.top").on('click',function(e) {
e.preventDefault(); // prevent page from reloading
e.stopPropagation(); // prevent parent click
alert('Here We Are :)');
});
Working Demo
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");
});
I have a navigation menu which the style of the elements change if i click on them..they get the class "active".
I have a dropdown Menu in my navigation, how can i make it that the drop down title get the class and not only the elements at the dropdown. Here my page.
Here is the code for the navigation:
$('#content').children('section').not('#home').hide();
$('.active:has(a.anavigation-element)').not('.navbar-brand').not('#home').removeClass('active');
$(".a").click(function(e){
var $this = $(this);
e.preventDefault();
if ($(this).hasClass('navigation-element')){
var $target = $('#' + $(this).attr('href')).stop(true, true);
var $secs = $('#content > section').not($target).stop(true, true).filter(':visible');
if ($secs.length) {
$('.active:has(a.navigation-element)').not('.navbar-brand').removeClass('active');
$this.not('.navbar-brand').parent().addClass('active');
$secs.fadeOut(function () {
$target.fadeIn();
});
} else {
$this.not('.navbar-brand').parent().addClass('active');
$target.fadeIn();
}
} else if ($(this).hasClass('hide')){
$(this).parent().fadeOut();
}
});
Thank you for helping me!