Show multiple containers with the same class when clicking an item - javascript

I have a long page, where one section is tabbed content. However, at the same time as showing tabs, I'd like for other sections further down the page to be visible or hidden, depending on which tab is clicked. Since each tab would display about 4 containers further down the page, I'd like to use classes for this rather than ID's. This is a rough outline of what I have so far (tab content removed, as it's unnecessary):
<div class="horisontal-tabs">
<ul class="tabs">
<li class="tab-label active person-sam" rel="tab1">Sam</li>
<li class="tab-label person-bob" rel="tab2">Bob</li>
<li class="tab-label person-jack" rel="tab3">Jack</li>
<li class="tab-label person-kelly" rel="tab4">Kelly</li>
</ul>
</div>
<div class="container-sam section-visible">Custom content only for Sam</div>
<div class="container-bob section-hidden">Custom content only for Bob</div>
<div class="container-jack section-hidden">Custom content only for Jack</div>
<div class="container-kelly section-hidden">Custom content only for Kelly</div>
<div class="container-sam section-visible">Other content for Sam</div>
<div class="container-bob section-hidden">Other content for Bob</div>
<div class="container-jack section-hidden">Other content for Jack</div>
<div class="container-kelly section-hidden">Other content for Kelly</div>
And I have jquery as per below for each person, but it doesn't seem to be working, and I can't figure out how to simplify it down. The idea is that when you click on one person's tab, all the other people's sections will be hidden and that person's will be visible.
$('.horizontal-tabs ul.tabs li.person-sam').click(function (event) {
$('.container-sam').removeClass('section-hidden').addClass('section-visible');
$('.container-sam.section-visible').removeClass('section-visible').addClass('section-hidden');
event.stopPropagation();
});
I have opted to not use ID on the sections and use a class instead, because multiple will need to show at once, so they wouldn't be unique.
Any tips will be greatly appreciated! :)

So the question is how to make simpler?
What comes to mind is you don't need active and inactive classes, you just need one of them, and then you can make the other be the default state . That is, add a default class .section to all sections and either use .section as the visible state and add .section-hidden to hide it, or use .section as the hidden state and add .section-visible to show it.
Say you go with .section-visible, the css would be something like this:
.section { display: none }
.section.section-visible { display: block }
This would also simplify your javascript because now you can reset all sections and just turn on/off the ones you need.
If you go, again, with .section-visible, run this on click:
$('.section').removeClass('section-visible'); // reset all sections
$('.container-sam').addClass('section-visible'); // add visible class to specific sections
You can see you only need one extra class, not two.
BONUS 1: you can use BEM to make it clearer.
BONUS 2: it looks like you have one click listener for each person, but instead you can use the HTML dataset API and the jQuery .data() function to detect which person's button you're pressing. That way you would have only one click listener, and you can detect which li was clicked by checking the data- attribute. Like <li data-person="sam">sam</li> and const containerSelector = `.container-${$(this).data('person')}`;. $(this) will select the li clicked, and .data('person') will return 'sam'. So the selector will be .container-sam.

Related

Open a sub-menu using jQuery

I have this menu:
What I want to do: when I click the image button on the right (#sub-menu) I want it to open the sub-menu (.sports2).
this is a sub-item html code for an example:
<a href="#"><li> Golf
<img src="strokesmenu.png" id="sub-menu" />
<ul class="sports2">
<li>British Open</li>
<li>Masters</li>
<li>PGA Championship</li>
<li>US Open</li>
</ul>
</li></a>
Why this code isn't working for me?
$('#sub-menu').click(function(){
//$('.sports2').slideToggle("slow");
$(this).find('ul>li').slideToggle(slow);
})
first of all, <li>British Open</li> this structuring is so wrong I cannot even describe it how wrong it is.
convert it to the <li>British Open</li> if you want to make click-able while li try using below css or similar to that
ul li a {
display: inline-block;
width:100%;
height:100%;
}
also there must be only one item with one id having multiple item is against the W3C rules and clicking the little icon is not so user friendly. so instead give class to main item li and hanle the click with that one.
$('li.main').click(function(){
$(this).find('ul').slideToggle('slow');
})
apparently you cannot do that so you have to bind it to the img first change id to the class e.g. class="sub-menu"
$('li img.sub-menu').click(function(){
//$(this) -> img .next() -> ul
$(this).next().slideToggle('slow');
})
now the $(this).find('ul>li').slideToggle('slow'); should work but it will open every li and might cause some problem issues.
instead I suggest using $(this).find('ul').slideToggle('slow'); so the list can be opened/closed. you see the animation differences by trying it and choose the best one for you.
EDIT FOR CLICK BUG:
well not sure if I get it right but as I understand in some cases you need to redirect the page in others open the sub menu.
in that case you can check if the li has submenu or not the following code should do the trick.
$('li.main').click(function(){
if ($(this).has("ul")) // if has submenu
$(this).find('ul>li').slideToggle('slow');
else
// your redirect code.
})

Backbone.js – changes to li element don't display immediately

What I have in my template is just a bunch of divs and a list, consisting of multiple li elements. The use case is simple, the li elements are a dropdown and are displayed only on clicking a button. When the dropdown is visible and someone begins to type, the matching li element should be selected, or there should be a visual indication.
My approach is this, on a keyup event, I look for the typed word (this is quite easy) in the li elements. I find a few elements, which I've confirmed. Now, when I try to do something with these elements, nothing seems to happen WHILE the dropdown is open (right now, I'm trying to .toggle()) these elements. Now, when I click the button again (which showed the dropdown in the first place) (this click hides the dropdown), and then click the same button again to reveal the dropdown, voila! The values have been changed as they should be – the matching elements have been hidden/shown.
This has me stumped. For company policies, I can't upload the code up here, but I'll be very thankful if someone else has had this problem before and can help me out.
EDIT:
Code: function to change the dropdown on keypress, this is being fired correctly:
filterOptionsForKeypress: function (event) {
var typedString = this.$('input.filter-button-text').val(),
searchToken = _.trim(typedString.toLowerCase().replace(/ /g, '_')),
matchingLi = this.$("li[data-field^='" + searchToken + "']", this.$el), // makes no difference with or without the context, this.$el
that = this;
if (matchingLi && matchingLi.length) {
this.$(matchingLi[0]).html('kaka'); // this change shows only if the dropdown is hidden + shown again
console.log('trying to move focus', this.$(matchingLi[0]).attr('data-field'));
}
// this.$el.append('Some text'); -- this works, I see the changes as they happen
}
And the template looks something like this:
<div class="filter-button filter-option {{if !model.include}}button-red{{else}}button-green{{/if}} toggle-dropdown" data-dropdown-class="{{if !model.include}}button-red{{else}}button-green{{/if}}">
<div class="filter-button-text">${model.option}</div>
<div class="filter-drop"></div>
<div class="dropdown filter-dropdown">
<ul>
{{each model.config.options}}
<li data-field="${$value.op}" data-include='${$value.include}'>${$value.name}</li>
{{/each}}
</ul>
</div>
</div>
EDIT #2:
When the dropdown is open, this is how the html looks:
OPEN:
CLOSED:
So basically, apart from adding a few styles to the enclosing div and a class 'open', I don't see any differences.
The problem was that we're using a plugin for dropdown menus. So basically, what we saw on the screen wasn't what we found selecting with this.$(). The solution? Look globally and with a :visible filter voila, problem solved.

li accordion style menu in one ul with multiple classes

I'm working on a website that uses ruby on rails to retrieve multiple links and place them into a single ul with multiple li elements of either class 'head' or class 'link'.
I am trying to get an accordion style effect working with this, so when a user clicks on a 'head' li the subsequent child 'link' li's appear and disappear when another 'head' li is clicked.
I know about the accordion in jquery ui but I dont think thats an option with the rails code being used in the project. I'm only an intern and I'm not sure if the CTO is going to spend his time redoing his code to suit me. I'm trying my best to work with what I've got.
Example of the code:
<ul>
<li class = "head">HEAD</li>
<li class = "link">link</li>
<li class = "link">link</li>
<li class = "link">link</li>
<li class = "head">HEAD</li>
<li class = "link">link</li>
<li class = "link">link</li>
<li class = "link">link</li>
<li class = "head">HEAD</li>
<li class = "link">link</li>
</ul>
<script>
$('li.link').hide();
$('li.head:first-child').click(function(){
$('li.link').slice(0, 3).slideToggle('slow');
});
</script>
This is the closest I've gotten so far for the desired effect.
I genuinely appreciate any help I get.
You really got it almost quite good, but you're just targeting the click on the first .head instead for all of them. Than, the .nextUntil() method will help you target the desired elements.
LIVE DEMO
$('li.link').hide();
$('li.head').click(function(){
$(this).nextUntil('.head').slideToggle('slow');
});
Docs:
http://api.jquery.com/nextuntil/
Further to Roko's answer, this might help with the accordion feature, collapsing any non-relevant links that are showing when a new Head is clicked on:
$('li.link').hide();
$('li.head').click(function(){
// gets all the previous links and hides them
$(this).prevAll('.link').slideUp('slow');
// gets all the links that come after the next head, and hides them too
var nextHead = $(this).nextAll('.head').first();
$(nextHead).nextAll('.link').slideUp('slow');
// toggles all the relevant links for the current head
$(this).nextUntil('.head').slideToggle('slow');
});
Demo here: http://jsfiddle.net/xwbrB/7/

Losing dropdown list info on mouseout

I have built a simple dropdown list which I populate with various links. It contains about 50 items, so I wrapped it in a div to make it scrollable. Problem is, when I mouseout, I lose the whole list, unless the first two list elelments are showing. I have constructed this dropdown as a submenu, with the first two links as the 'container' of sorts.
I somewhat understand why I am losing the entire list, but can't figure out how to make the top links reapear on mouseout.
$('.myMenu > li').bind('mouseover', openSubMenu);
function openSubMenu() {
$('.myMenu').css('overflow','auto');
$('.myMenu').css('height','400px');
$('.ulMenu').css('visibility', 'visible');
};
$('.myMenu > li').bind('mouseout', closeSubMenu);
function closeSubMenu() {
$('.myMenu').css('overflow','hidden');
$('.myMenu').css('height','20px');
$('.ulMenu').css('visibility', 'hidden');
}
}
</script>
<div id="menu">
<ul class="myMenu">
<li id="li_left"> Application </li>
<li id="li"> Hover For Listing
<ul id="tasksUl" class="ulMenu">
</ul>
</li>
</ul>
</div>
I think you also have to post your .css for the list. I think you got a menu and you wanna open a list on hovering <li id="li"> Hover For Listing
You are setting a
$('.myMenu').css('height','20px');
and I don't get why you would do that. Also your .css styles are pretty much deprecated.
Check the fiddle here: http://jsfiddle.net/eR2y9/1/
Works like a charm. There is no need for you to add a height for the menu because it's dynamically adjusting depending on the amount of entries inside. Also if set to display none it's not taking any space away.. If you have further questions or if I misunderstood your problem feel free to reply to my post and I will find a solution for ya.

Open/Close Icons

I'm doing some shennanigans with jQuery to put little plus/minus icons next to my expanders. Its similar to the windows file trees, or firebugs code expanders.
It works, but its not specific enough.
Hopefully this makes sense...
$('div.toggle').hide();//hide all divs that are part of the expand/collapse
$('ul.product-info li a').toggle(function(event){
event.preventDefault();
$(this).next('div').slideToggle(200);//find the next div and sliiiide it
$('img.expander').attr('src','img/content/info-close.gif');//this is the part thats not specific enough!!!
},function(event) { // opposite here
event.preventDefault();
$(this).next('div').slideToggle(200);
$('img.expander').attr('src','img/content/info-open.gif');
});
<ul class="product-info">
<li>
<a class="img-link" href="#"><img class="expander" src="img/content/info-open.gif" alt="Click to exand this section" /> <span>How it compares to the other options</span>
</a>
<div class="toggle"><p>Content viewable when expanded!</p></div>
</li>
</ul>
There are loads of $('img.expander') tags on the page, but I need to be specific. I've tried the next() functionality ( like I've used to find the next div), but it says that its undefined. How can I locate my specific img.expander tag? Thanks.
EDIT, updated code as per Douglas' solution:
$('div.toggle').hide();
$('ul.product-info li a').toggle(function(event){
//$('#faq-copy .answer').hide();
event.preventDefault();
$(this).next('div').slideToggle(200);
$(this).contents('img.expander').attr('src','img/content/info-close.gif');
//alert('on');
},function(event) { // same here
event.preventDefault();
$(this).next('div').slideToggle(200);
$(this).contents('img.expander').attr('src','img/content/info-open.gif');
});
$(this).contents('img.expander')
This is what you want. It will select all of the nodes that are children of your list. In your case, all of your images are nested inside of the list element, so this will filter out only what you want.
How about making your click event toggle a CSS class on a parent item (in your case, perhaps the ul.product-info). Then you can use CSS background properties to change the background image for a <span> instead of using a literal <img> and trying to fiddle with the src. You would also be able to accomplish a showing and hiding on your div.toggle's.
ul.product-info.open span.toggler {
background-image: url( "open-toggler.png" );
}
ul.product-info.closed span.toggler {
background-image: url( "closed-toggler.png" );
}
ul.product-info.open div.toggle {
display: block;
}
ul.product-info.closed div.toggle {
display: hidden;
}
Using jQuery navigation/spidering functions can be slow when the DOM has many items and deep nesting. With CSS, your browser will render and change things more quickly.
Have you tried the .siblings() method?
$(this).siblings('img.expander').attr('src','img/content/info-close.gif');

Categories