slideToggle opening all links on page? - javascript

I am new to Javascript and am having a few issues with my toggle menu:
1) I set the sub links to display:none; but they are still displaying anyway. I need them to be hidden on page load.
2) When clicking one of the main links, it toggles both main links instead of just the one clicked on. What do I need to add so that only the clicked link opens?
http://jsfiddle.net/musiclvr86/5otvoxho/

Bit of hack
$(document).ready(function(){
$('.sub').slideToggle(0);
$('.main').click(function(){
$(this).nextUntil(".main").slideToggle('fast');
});
});
and remove the line from your css
.dark-link.sub {display:none; }
http://jsfiddle.net/5otvoxho/4/

When you call it like this:
$('.sub').slideToggle('fast');
You're targeting every element that has a .sub class, so all of them will toggle. To fix it, you have to subject the selection to the elements relative to the clicked one using this. Since, by your structure they are siblings, not parent/children, you may use the .nextUntil() method from Jquery:
Updated Fiddle
$(this).nextUntil(".main").slideToggle('fast');
This will select every subsequent siblings, until it finds another .main

Related

Toggle show/hide (jQuery)

There are many posts on this topic already but none that address my issue directly. Here is my current setup:
I have a div with the ID #ptwesv;
and another div containing the content I want to show hide with the ID #ptwest.
The jQuery I'm using is this:
<script>
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").show();
});
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").hide();
});
</script>
This is hiding the #ptwest container correctly on click, but then doesn't show the conatiner when I click the trigger element (#ptwesv) again. I presume this is because once the element has been hidden, clicking on the trigger again is causing the actions to work against each other.
I'm using this W3 exmaple as a reference, the only salient different I notice is that there are different trigger elements for show/hide.
Is it possible to trigger show/hide of an element from the a single div and how can I get this to work?
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").toggle();
});
is the way you want. It toggles the element. So if it is shown it hides and the other way around.
At the moment the element will always hide, because of twice the same click element.
Because Id is unique for whole document. try with toggle()
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").toggle();
});
The toggle() method toggles between hide() and show() for the selected elements.
This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.
$("#ptwesv").click(function(){
$("#ptwest").toggle();
});

jQuery Panel Will Not Toggle Active Class/Collapse One at a Time

I have two divs - one panel div that controls what shows on the other div. The problem is I have to apply a 'selected' class when a panel is active and also when the sub items under the panel is active as well. Right now, it does not "toggle" the selected class when active. This is what I have so far...
jQuery
$('.options-display .options-list').hide();
$('#option-1').show(); // change to whatever is shown first on page
$('.collapse p').click(function(){
$(this).toggleClass('.selected');
var target = '#' + $(this).data('target');
$('.options-list').not(target).hide();
$(target).show();
});
jsfiddle
https://jsfiddle.net/peyton_fields98/48d8zut7/
It is working as written, perhaps not as intended. There are two aspects which may not be obvious that led to your confusion.
First, this is a common typo that I have made as well, when using a class name in the toggle (or addClass or removeClass) make sure you do not include the . for the selector
//$(this).toggleClass('.selected');
$(this).toggleClass('selected');//should be this
// ^no `.`
To note: using this approach still leaves the original "selected" class intact. Perhaps you should preface this line of code with
$('.collapse .selected').removeClass('selected');
Second, the this binding in the click callback is going to be the element clicked, and in your example when selecting a sub item, it is the <p> element. Perhaps the selected class should be on the parent div in those cases if you are wanting to style the entire section. It was hard to tell as you left out the styling for the selected class.

Jquery issue on css

I'm using a jQuery function to add a class on li tag when it is clicked. The problem is that the class is added for a moment and after disappear. Maybe , 'cause I'm working into joomla there are another jquery function or another php script thet modify li tag after my jquery function?
This is my website,http://debatoversigt.dk/ and if you click on left menu you can see background color appear for an instant and after disappear.
This is my jQuery:
jQuery( document ).ready(function() {
jQuery(".art-block li").click(function(){
jQuery(".selected").removeClass("selected");
jQuery(this).addClass("selected");
});
and css:
.selected{
background-color:red!important;
}
The CSS is removed because the page refreshes. You will need to put code into your page that looks at the current page's URL and applies your selected CSS style to the appropriate menu item. Doing this will still let it function as a menu item but also remain selected on a page load.
One method to consider is to leave the code you have in place already and add this to the page:
jQuery( document ).ready(function() {
var windowloc = window.location.pathname;
jQuery(".art-block li").each(function() {
if(jQuery(this).attr("href")==windowloc) {
jquery(this).addClass("selected");
}
});
});
Another method to use (which is more work but also more robust) is to add a class to the body tag of the page so that it corresponds with a menu item. That would actually be a cleaner method as you can then highlight menu items for child pages and not just for the top level sections. You would need to incorporate a unique CSS class with each list item so that you can compare them on page load. I found a tutorial on adding body classes to Joomla that may be helpful for this approach.
You would use something like this JavaScript code to highlight the menu item once you had your CSS classes in place (both on the menu li items and the body class):
jQuery( document ).ready(function() {
jQuery( document ).ready(function() {
var bodyclass = jQuery("body").attr("class");
jQuery(".art-block li").each(function() {
if(jQuery(this).hasClass(bodyclass)) {
jQuery(this).addClass("selected");
}
});
});
});
Either of these methods would work on your current website, but pick what you feel makes the most sense for your website now and going forward.
In case you want to keep that page refresh, but have the proper menu item highlighted, you need to figure out a way to select the proper menu item. For example, you can compare the current url with each menu items' href attribute, and if they match highlight that item.
The other option is to use AJAX to update the content of the page. From your comments, I assume that's not what you want, but anyway, to do that, you need to prevent the default anchor behavior and load the content. That way you won't have to worry about the disappearing highlight and your code will work perfectly (but you'll run into other issues typical for one-page AJAX websites like URL states, browser history buttons, etc...).

How to utilize :visited on parent elements?

I basically have a listing of content, which all goes to external url's (it opens them in new windows). As of right now, i have a:visited set to gray, although what i would REALLY love is for the whole list item (which contains the anchor link they click on) to have a reduced opacity.
You can see this behavior on reddit.
Say for example you have
<div class="item">
Click me
</div>
And then you have many rows of .item
I want it so that when you click on the link, the entire div can 'see' the :visited state, and so .item gets set to opacity: .5;, as opposed to just the text turning gray.
Is there a way to do this with JS or css?
This isn't exactly a solution to your technical problem, but would it be possible to alter your structure to make the <a> accomplish the stylistic needs of the <div> parent?
In other words, kill the <div>, and just use the <a>. That way, when it's "visited," you can do whatever you want right to it.
It appears there isn't a :visited selector in jQuery. Check out this plugin for including it:
http://remysharp.com/2008/02/25/visited-plugin/
Using this plugin, you can implement this effect using either this:
$("a").visited().each(function() {
$(this).parent().css("opacity", "0.5");
});
or this:
$(".item").filter(function() {
return $(this).find("a").visited().length;
}).css("opacity", "0.5");
Once CSS4 selectors are supported (assuming the present draft is accepted in something similar to its current form),
div.item! > a:visited
will select the parent div with class item of a visited a.
Until then, cssParentSelector may work.

JQuery expands all divs on page

One div works fine, however when using multiple divs they all get expanded simultaneously.
Here 1x
http://jsfiddle.net/uPzXh/1/
Here 2x
http://jsfiddle.net/uPzXh/
How about:
jQuery(document).ready(function() {
jQuery(".lol").hide();
jQuery(".lollink").click(function() {
jQuery(this).prev().slideToggle(500);
jQuery(this,".new").hide();
});
});
BTW div in a is not allowed according to the spec.
In the second example you have a div with the same class name twice. So this line of code:
jQuery(".lol").slideToggle(500);
is doing what you tell it to do .. open all elements with a class name of lol.
Changing the class of the second div to lol2 would fix this.
I think you need to use $(this) inside the click function rather than $('.lol')
demo
I think what you are looking for is to expand one div when one link is clicked (not expand both, one after the other). If that's right, you can do something like this:
jQuery(".lollink").click(function() {
jQuery(this).hide().parent().find(".lol").slideToggle(500);
});
This hides the clicked element, gets the parent element, finds the descendant of that element with class .lol and toggles the slide on that.
See an updated fiddle here.

Categories