We Keep Coding

Show multiple containers with the same class when clicking an item

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.

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.
})

Toggling two divs with the click of one link from another page

I'm trying to create a page that compares two products side-by-side. So far, I have a single-post page for each individual product. On that single-post page is a set of links that allow the user to select a different product to compare it to.
On the comparison page, I was able to figure out how to toggle the first div that pulls the information from the original post, but how do I toggle the second div too?
Here's the code I have on the single-post page (I used Jquery show/hide in another page as a reference):
<ul class="linkList">
<li>Product 1</li>
<li>Product 2</li>
</ul>
Here's the code I have on the comparison page:
<ul class="linkList">
<li>Product 1</li>
<li>Product 2</li>
</ul>
<div id="product1" class="switch">Product 1</div>
<div id="product2" class="switch">Product 2</div>
My JS:
$(function() {
var anc = window.location.href.split('#')[1];
$('#' + anc + '.switch').show();
$('a.panlink').click(function() {
$('.switch').hide();
$($(this).attr('href')).show();
});
});
and my CSS:
.switch { display: none; }
I've searched high and low, and I can't seem to find an answer for this - only answers from toggling one div.
Let me know if you need clarification - thanks! :)

Here is one approach that may benefit you.
If you every want to compare any of your relative web pages into your current page, use jQuery's AJAX process within an .on('click', 'class-of-product', function() {}); approach to pull data onto your current page. You may need to also use the filter() method to reduce the amount of set elements you are pulling from your product pages.

Animated Drop Down Menu for a Template

I have never used jQuery before and I'm trying to do something really simple but it's been driving me crazy.
I have designed a template for a CMS and now I want to get its menus animated.
The picture below explains the structure of the menu (which is obviously generated by the CMS)
The code below is what I think should work, but it doesn't:
var menuItem = jQuery(".menu:first>li");
var subMenu;
for(var i=0; i<menuItem.length;i++)
{
var li = jQuery(menuItem[i]);
subMenu = li.children("ul");
if (subMenu.length)
li.hover(function(){ li.children("ul").slideToggle(250); });
}
Basically, what I'm doing is get the first level lis and then add a hover listener to them, telling them to animate their child ul (which is the actual sub menu).
What I get instead is when I point to "Products" it's own sub menu does not show, instead, the sub menu for "Contact Us" pops up! When I point to "Contact Us" its sub menu pops up like it is supposed to. Note: The brown ul is set to display:none
I appreciate any help.
Thank in advance
PS: I'm using jQuery 1.7.1 (if it matters)

It looks quite complicated for what your trying to achieve. i would do something like this.
$(".menu > li").hover(
//When mouse is over the menu button
function () {
$(this).children("ul").slideDown(250);
},
//When mouse leaves the menu / menu button
function () {
$(this).children("ul").slideUp(250);
}
);

I see what you're trying to do in your code but I think you should start with good jQuery practices first. It's really not hard, you'll see. And it will make your life a lot easier.
First of all, I'm not sure a loop is what you want here. jQuery offers a selector (which can be used with $ as a shortcut) to select classes and it's really powerful.
Build your menu like this (sort of):
<ul id="menu">
<li class="menu-item">Home
<ul>
<li></li>
<li></li>
</ul>
</li>
<li class="menu-item">Products
<ul>
<li></li>
<li></li>
</ul>
</li>
<li class="menu-item">Contact us
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
Then you can select the menu items with
$('.menu-item')
and in its hover function, select the drop down with
$(this).childen('ul')
Then basically have fun!

jQuery: Finding and hiding single parent link in nested list menu within Div - using contains();

I have a site that's CMS has very limited menu control. As such I'm trying to work around these problems with jQuery to display the menu how I want. I know it will still be in the HTML but as long as it's displaying the way I want it will be fine (at least for my standards).
The menu in question currently looks something like this.
<div id="sidemenu">
<ul>
<li class="childlist">
GET RID OF THIS PARENT
<ul>
<li>Show this</li>
<li>Show this</li>
<li>Show this</li>
</ul>
</li>
</ul>
</div>
I have achieved what I want with the simple $('a:contains(GET RID OF THIS PARENT)').hide(); however the menu is being pulled into two locations and I only want to hide the one in the sidemenu div.
I have tried this approach:
$side = $('#sidemenu');
$hidethis = $('$side:contains('GET RID OF THIS PARENT')');
$hidethis.hide();
But this crashes the page (I've been playing around in the console in Chrome to try to get a solution)
I will be the first to admit my javascript is terrible so any assistance would be well received.
Thanks in advance.

Your code should look like...
$side = $('#sidemenu');
$hidethis = $side.find(':contains('GET RID OF THIS PARENT')');
$hidethis.hide();

try this:
jQuery("#slidemenu").find("a:contains('GIT RID OF THIS PARENT')").hide();
Find First instance...
jQuery("#slidemenu > .childlist:first").find("a:contains('GIT RID OF THIS PARENT')").hide();
Looping through all the children:
jQuery("#slidemenu").find(".childlist").each(function() {
var $childListBranch = jQuery(this);
$childListBranch.find("a:contains('GIT RID OF THIS PARENT')").hide();
});

You need to target what you want to hide. For instance if you want to hide a link which has "get rid of this parent" text you can target a:contains. If you want to hide its parent you need to target #sidemenu:contains to its parent. here is the code example
//Hide a link
$("a:contains('GET RID OF THIS PARENT')").hide();
//Hide its parent
$("#sidemenu:contains('GET RID OF THIS PARENT')").hide();
Jsfiddle Demo