jQuery show list items - javascript

I have two ul's that when the top li is clicked it shows the others below and hides another opened in other ul's.
My problem is I had to add a View All link beside the main li which I want to direct the users to a view all page while still allowing them to click main li to display the list.
I have put another a tag beside the main li's but now I cant get the show feature too work. Not sure what might be wrong.
I am not a great at traversing the dom and I know I have the siblings worng.
http://jsfiddle.net/ukkpower/En7KV/8/

EDIT: Sorry, I missed the hide all others requirement. Thanks for the comment. Please look at the link now and that issue should be resolved.
Note that I've wrapped the lists in a div called _sidenav. I much prefer this approach to looking for siblings as it's a bit easier to read and interpret at a glance and has less room for confusion in the future.
I think I understand what you want. Take a look at this fiddle:
http://jsfiddle.net/CU9zg/3/
I'm assuming the View All link is suppose to take you to another page, while the main li for a list acts like an accordian, hiding or showing the other items when clicked.
$('ul li.cat-item', $('#_sidenav')).hide();
$('.cat-item', $(this).closest('ul')).toggle();

Try this - http://jsfiddle.net/En7KV/10/
$('a.show_list').on('click', function(e){
e.preventDefault();
$(this).parent().siblings().toggle();
$(this).closest('ul').siblings().find('li a.show_list').parent().siblings(':visible').hide();
});

Related

Can not get expand navigation to work on nav

I recently have been experimenting with jquery in hopes to expand my knowledge. I have come across something odd though. I have a navigation where I want users to be able to expand it even further. However, everytime I click expand it opens up all menus rather than a specific one.
$('.expandicon').click(function(){
if ( $('.nav-bucket-items').css('display') == 'none' )
$('.nav-bucket-items').css('display','block');
else
$('.nav-bucket-items').css('display','none');
});
Here is the code I've used and here is the example: https://jsfiddle.net/xajoujsx/
As you can see, when you click the expand + button, it opens up all navigation. I just wanted it to open up the one I click around. Can anyone explain what I'm doing wrong?
From inside the click handler you can refer to .nav-bucket-items using:
$(this).parent().siblings('.nav-bucket-items')
fiddle
The code currently performs it on all elements with class .nav-bucket.
One option is to only apply to the immediate items for the parent.
$('.expandicon').click(function() {
var $ref = $($(this).parent().parent()).find('.nav-bucket-items')
if ($ref.css('display') == 'none')
$ref.css('display', 'block');
else
$ref.css('display', 'none');
});
Few things going on here, first, you're targeting all of the elements when you do $('.nav-bucket-items')
If you run that in your console you should see a list of elements rather than a single one, so what we want to do is target the parent, and then find the sibling, we also want to target the element link not the icon so that way the user can click the entire element to expand.
Working example: https://jsfiddle.net/dg4z271m/1/
I love it when I can learn someone more about their code than just fix the code for the sake of answering the question.
First, let me start by saying you don't need the .css('display','block'); to show or hide elements because .show() en .hide() does that for you. Amazing isn't it?
So, now we are left with this.
$('.expandicon').click(function(){
if ( $('.nav-bucket-items').css('display') == 'none' )
$('.nav-bucket-items').show();
else
$('.nav-bucket-items').hide();
});
But now we still have the problem of the multi-expanding menu. This is because you show (or hide) alle elements with the class '.nav-bucket-items' We just wan't the ones that are family of the .expandicon we've clicked! You can do that with $(this). You can use $(this) to traverse from the element you've clicked. Lets see.
$('.expandicon').click(function(){
if ( $('.nav-bucket-items').css('display') == 'none' )
$(this).parent().next('.nav-bucket-items')
else
$(this).parent().next('.nav-bucket-items')
});
When you use this, it will all be working as you wished. But we can do better than this! We can make it shorter, better and cleaner. We don't have to check if .nav-bucket-items is visible. Nope.
$('.expandicon').click(function(){
$(this).parent().next('.nav-bucket-items').toggle();
});
Did you see what happened? We just changed that whole bunch of code to one line that just toggles the element. So it will hide it when its shown and it will show when its hidden! If you really want some fancy effects, you could use slideToggle() or fadeToggle() instead of .toggle(). I updated your JSFiddle: https://jsfiddle.net/xajoujsx/3/

How to expand div after click and collapse it after another click?

I have an explandable/collapsible element that I created using Simple-expand
(A jQuery plug-in to expand/collapse elements).
What I want to do is change the css of the element when user clicks on it, expanding it ,and change it again when user clicks on it again ,collapsing it.
Problem is, I don't know how to do that. I know how to change class on click, but how can I change the CSS after the user "unclicked" this tab and it shrinked up?
EDIT: Thanks to George for correcting me on what I wanted to do, to be more clear. I was a bit tired, so I needed it fast. I know this is really bad excuse, but I fully understand and respect you guys, who gave me negative feedback.
Basically what I needed, is:
There's 6 different divs;
When you click on one div, it will expand;
When you click on another div, it will check if ANY OF THESE divs are EXPANDED, if YES - close (collapse) them, and open that div which I clicked on.
For that simple task (it's really simple, it's just me being stupid) I needed to use jQuery this statement and a few if's.
I found a solution after 15 mins after publishing this post here and I wanted to delete it, unfortunately, I can't, because it has answers.
Thanks to everyone who tried to help me, I appreciate your help.
Cheers!
Just use a class for when the element is expanded and toggleClass() to toggle the class on click
$( ".your_element" ).click(function() {
$( this ).toggleClass( "expanded" );
});
fiddle Demo
CSS
.active {
background-color: #CC0000;
font-weight:bold;
color:#FFFFFF;
}
jQuery
$('#button').click(function () {
$("#colormethis").toggleClass('active');
});
Use class active than toggleClass using jQuery
This how you change CSS. So try making it in your own code.
You can use materialize css collapsible link

(JavaScript ?) Display div with different content on choice?

I'm looking for a solution that will allow me to display a div when I click on a single link (which will change the way css style) with variable content (eg a sub-div with service1, service2, service3 ). This div will be displayed also propose several offers that will only display the div payment when one of these offers will be selected.
It's maybe hard to explain (i'm not english so sorry for really noob level), so maybe with this image you will "understand" a little bit more:
http://image.noelshack.com/fichiers/2015/38/1442422045-fonctionnement.jpg
I confess to being a bit lost with JavaScript for this kind of thing. I know it's probably achievable, but how? :-(
Thank you for your help folks!
If you want to go the way with altering CSS with javascript, assuming you are not creating the variable content on the fly, have the divs css for display set to none.
#divID {
display = none;
}
Then set an event listener on your link to change the display style to block.
document.getElementById("linkID").addEventListener("click", function() {
document.getElementById("divID").style.display = "block";
}
Ok so I created a crude representation of what you asked without much effects. But the fiddle I created completely functions as you intended. If you click buttons on div 1 the content of div 2 gets updated. If you click anything on div2 the information is displayed in div3. Here is the example: Working Example
window.function1 = function(){
var edits = document.getElementById('2');
edits.style.background="aliceblue";
}
//SAMPLE CODE TO EDIT ANY ELEMENT BY REFERRING BY ID. CALL SUCH FUNCTION ONCLICK
Please check the example to understand it fully.

Hide next Div with class name being used multiple times?

I'm getting myself really confused trying to hide the next Div with a class of .video on a page. I'm trying to have it so a later div on the page with the same class isn't effected by an input button element and only the next div with the class of ".video" after the button, if that makes sense.
I currently have it so all the div's are being effected, I've tried to use .next and .find, but for the life of me, I can't get it to work, I've tried googling around for a solution, but all seem to be not quite exactly what I need, perhaps I google'd the wrong thing, I'm not sure, but hopefully someone can provide some form of answer for me here so my mind can finally be at ease!
So this is the page currently
As you can see, the button hides/shows the elemnt as it should... but it effects the later element also.
I'm not really sure how to go about writing a script usign jQuery so the later one isn't effected... I've rattled my brain, but perhaps it's so late at night (or morning, rather!) that I just can't comprehend it in my drowzy state...
Hopefully one of you will be able to tell me what to do.
The script I'm currently using can also be found here
I appreciate any help, thanks.
try with this:
$(document).ready(function(){
$('.showhide').click(function(){
$(this).parent().next('.video').toggle();
//------^^^^^^^^^^^^^------------------------added to find the video of the parent's next
if($('.video').is(':visible')){
$('.showhide').attr('value','Hide Video');;
} else {
$('.showhide').attr('value','Show Video');;
}
});
});
i used your html in the fiddle,
see the fiddle: http://jsfiddle.net/8h7hP/

JQuery calls function that shouldn't be called onclick?

Have a look at this JSFiddle: http://jsfiddle.net/kZ3Af/25/
I have the base navigation pinned down nicely. However when I try to click any of the navigation items, the whole menu dissapears? What's that about?
Why are you doing
$('.navcontent').hide();
See update 30.
[Two minutes later...]
Ok, I think I get it: you want to switch between both list interior and exterior. I restructured your HTML a bit (don't put <div>s into <a>s), that's why your styling is a little bit off. Then I changed the selector as Steven Lu suggested: try update 36
You're calling $('.navcontent').hide(); which hides all your <ul> with the class navcontent which is why the whole menu disappears.
Your statement:
$('#column1 a').click(function(){
switchlist($(this));
});
Is matching the inside content of ALL links, causing your switchlist function to be fired.
You will need to wrap your top nav with a new id and change the the selector to something like
$('#topnav a').click();
You call $('.navcontent').hide(); in your click handler. Just remove that and it should work.
select direct anchor childs: $('#column1 > a').click

Categories

Resources