I have a link outside of a collapse element to an anchor inside of the collapsed content.
See my plnkr example.
If I collapse the panelat the bottom the anchor tag is not executed anymore. What I want to implement is the following:
If I click on an anchor which is currently not visible (because it is e.g. in an collapsed area), then I want to extend the containing area and then apply the link.
Any ideas how I could accomplish this?
Thanks a lot
$(function(){
$(document).on('click', 'a[href^="#"]', function(ev){
var targetId = $(ev.target).attr('href'),
$target = $(targetId);
$target.parents('.collapse').addClass('in').css({height: ''});
});
})
Like this? http://plnkr.co/edit/R2Fjsz9JnLkWEvFKUaAg?p=preview
// open collapsed items when clicking on the corresponding link
$(document).on('click', 'a[href^="#"]', function(ev){
var targetId = $(ev.target).attr('href'),
$target = $(targetId);
$target.parents('.collapse').addClass('show');
});
Same as accepted answer but for usage with Bootstrap Collapse elements
Related
Using accordion jQuery I want to collapse if now is active selected tab
now if I click on same tab nothing, but if I click on another tab activated tab is changed
example on jsfiddler
how I can to set inactive(slideUp) tab if I click when is active
You have to check if it already displaying then hide it:
if($(a).css("display") == "block")
$(a).slideUp('fast');
else
$(a).slideDown('fast');
or use .is() to check if it is visible:
if($(a).is(":visible"))
$(a).slideUp('fast');
else
$(a).slideDown('fast');
UPDATED FIDDLE
FIDDLE USING is(":visible")
change this:
$(a).slideDown('fast');
to this:
$(a).slideToggle('fast');
You need to check if the slide of the accordian is already visible using :visible:
link.on('click', function (e) {
e.preventDefault();
$("#accordion div").slideUp('fast');
var $target = $(this.hash);
if (!$target.is(':visible'))
$target.slideDown('fast');
});
Example fiddle
I can not add class active in LI navigation menu where i click.
When i click on WHAT WE DO on home page it jump to what we do page so i need menu WHAT WE DO in what we do page to be active.
Here is my JSFIDDLE
JS
$( document ).ready(function() {
$( "#cssmenu a" ).click(function(e) {
e.preventDefault();
var navId = $(this).attr("href");
var str = '.' + $(this).attr('id');
$("html, body").animate({
scrollTop: $(navId).offset().top
}, 600);
$(str).show();
$(this).closest('ul').find('li').removeClass("active");
$(str).find('li').removeClass("active");
$(str).closest('ul').find('li').addClass("active");
});
});
You are using same id for multiple elements. Please remove it and use different Ids for different elements.
You can add active class using below jQuery :
$(str).find('[href="'+navId+'"]').closest('li').addClass("active");
instead of
$(str).closest('ul').find('li').addClass("active");
Working JSFiddle
Note : as active class has font color white hence it is not visible after adding active class to the li.
Updated Fiddle
You need to find li - a in what we do page to add the class.Change the last line to this,
$(str).find('ul li a#'+$(this).attr('id')).parent().addClass("active");
Or just
$(str).find('a#'+$(this).attr('id')).parent().addClass("active");
Note : Your markup has Duplicate IDs which is invalid.
Element IDs should be unique within the entire document.
Creating tabs in jQuery. When you click another tab, all the tabs disappear. Can't figure out the fix
Here's the page not working: http://www.sleepfullnights.com/products/sfn-537
Here's the JSFiddle another guy made of it working: http://jsfiddle.net/gravitybox/7pHg4/ I've copied and pasted every element of this into the page and the issue is still there.
One person pointed out that something is giving the tabs the css "display:none" when clicked and I can't find where to fix it.
Also, another observation someone made was that "In Chrome dev tools, if you right click the ul.tabs in the "Elements" tab and select "Break On > Attributes modifications", it breaks on "$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');" when you click a tab".
Here's the jQuery code I have:
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
And the code from the working JSFiddle:
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
alert('yep');
});
});
});
Any help/guidance is greatly appreciated.
I'm the one who noted "In Chrome dev tools, if you right click the ul.tabs in the "Elements" tab and select "Break On > Attributes modifications", it breaks on "$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');"
It breaks there because that line is what is hiding the ul containing the tabs.
Looking at your website's code, you need to change the following inside app.js on Line 39.
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
to this:
$(contentLocation).show().addClass('active').siblings('div').hide().removeClass('active');
You only want to target the div siblings of the selected tab's content div. Right now, the ul is also a sibling of the selected div. Without the 'div', siblings() will select all of its siblings and hide() them (thus hiding the tabs too).
Preferably, I would add a tab-content class to the tab content div elements and use siblings('.tab-content') instead of siblings('div') to be more specific. That way if you add another div that happens to be a sibling, it won't hide that.
What's Going On
The code used for those tabs is much more complicated than you need, and I'm not really sure what is breaking. Rather than try to fix it, it would be easier to just start over. This is what you want:
Every time a user clicks on a tab, all tabs have the active class removed, and all content is hidden. Then, the active clicked on tab is given the active class and it's content is shown. This should seem instantaneous to the user. You will need to add a class to your content divs to accomplish this easily. I'd add tab-content.
Code
Working Fiddle
HTML (Only change is adding the class)
<div class="tab-content" id="tab-1">
...Content...
</div>
<div class="tab-content" id="tab-2">
...Content...
</div>
<div class="tab-content" id="tab-3">
...Content...
</div>
Javascript:
$(document).ready(function() {
$('.tabs li a').click(function(event){
event.preventDefault();
$('.tabs li a').removeClass('active');
$(this).addClass('active');
$('.tab-content').hide();
$($(this).attr('href')).show();
});
});
It's definitely a problem with the ul getting display: none. You could try overriding it in the click handler with $('ul.tabs').css('display','block'). It's hard to tell where the issues is coming from because of the amount of scripts on your page.
jfiddle: http://jsfiddle.net/ZmDs2/1/
Hi Im trying to accomplish collopsing other parent items while opening only one with jQuery toggle.
I tried
var index = $(this).index();
$('.togglebox').eq(index).slideToggle("fast").siblings('.togglebox').hide();
I would like you guys help..
Thanks
I changed the javascript to this:
$(document).ready(function(){
//Hide the tooglebox when page load
var current, toggleBoxes = $(".togglebox").hide();
//slide up and down when click over heading 2
$("h3").click(function(){
current = $(this).next(".togglebox");
toggleBoxes.not(current).slideUp('fast');
current.slideDown("fast");
});
});
I simply save all the elements with the "togglebox" class and collapse them before doing the slideToggle animation.
you weren't calling the hide function in the click event:
http://jsfiddle.net/ZmDs2/3/
Try this
$(function(){
$(".togglebox").hide();
$("h3").click(function(){
$(".togglebox").slideUp('fast');
$(this).next(".togglebox").slideDown("fast");
});
});
Good day,
I want to set click event on every anchor element in my div container. Here is an example what I want to do:
---HTML---
<div id="my-container">
page1
page2
page3
</div>
---- jQuery ----
$("#my-container a").click(function() {
var link = $(this).attr("href");
$("#my-container").load(link);
});
What I want to do is to let me handle loading event of href clicks and load it to the same container. And this is must done without id, class attributes which aren't available for that hrefs. The problem is in this: $("#my-container a"). Any help would be appreciated! Thanks
UPDATE
People doesn't seem to get right what I wanted to ask. I repeat myself again. $("#my-container a") <---- doesn't add click events on href anchors. So how I can set click event?
Try this, wasn't sure if you were missing any tags so I've put the whole thing in:
<script type="text/javascript">
$(document).ready(function(){
$("#my-container a").click(function(event) {
alert('test');
var link = $(this).attr("href");
$("#my-container").load(link);
event.preventDefault();
});
});
</script>
You forgot to quote the href string literal:
var link = $(this).attr("href");
^ ^
Also, you will need to cancel the default behavior of the click event. Currently, your event handler would fire, but you would not see the result, as the browser continues to follow the link you have clicked. Add a return false; as the last line of the event handling function to cancel this behavior.
Add return false;.
$("#my-container a").click(function() {
var link = $(this).attr("href");
$("#my-container").load(link);
return false;
});
You can do like:
$(function(){
$("#my-container > a").click(function() {
var link = $(this).attr('href');
$('#my-container').load(link);
return false;
});
});
But if you meant that you don't want to give the div any id or class then any div having links inside it will also be affected. So you should at least give the id to the div you want to load the content in.
Have you tried it with the bind function:
$("#my-container a").bind("click", function() {
var link = $(this).attr("href");
$("#my-container").load(link);
});