Develop Reference

Hide divs by class name instead of id in javascript

I have this JavaScript function that hides div tags from the condition if a checkbox is checked.
following is JavaScript Code:
function showMeA (div) {
var chboxs = document.getElementsByName("enableA");
var vis = "none";
for(var i=0;i<chboxs.length;i++) {
if(chboxs[i].checked){
vis = "block";
break;
}
}
document.getElementById(div).style.display = vis;
}
The problem is that function works based on the div's ID. I want to make it work based on the div's class name.
I have tried replacing the getElementById part with getElementsByClassName but, it doesn't work. Can someone propose an exact change that i need to implement in the function in order for it to work based on the div's class?
Thanks in advance.

Instead of using getElementById, you can use getElementsByClassName.
document.getElementsByClassName('className')

You can do this without any Javascript, just with pure CSS and some clever HTML structuring.
.switchme {
display: none;
}
#switch:checked ~ .switchme {
display: block;
}
<input type="checkbox" checked="checked" id="switch" />
<div class="switchme">Switch this div!</div>
<div class="dontswitchme">This div won't be switched.</div>
<ul class="switchme">
<li>This works without any JS.</li>
<li>It is based on CSS 3's :checked pseudo selector.</li>
</ul>
<img class="switchme" src="http://placehold.it/300x200&text=SwitchMe" alt="" />

jquery hide div loaded previously with jquery click function

I'm trying to create a menu that will show a div when one of the items is clicked by adding the class "visible".
When a second Item is clicked on the menu, it's suppose to hide the previous div by replacing the class "visible" with hidden"
I am not able to make it hide the previous div and I have tried using if conditionals I guess I'm doing something wrong. I appreciate any help on this.
This is the menu I'm using:
<ul class="product_dynamic list_male">
<li><span class="title">option 1</span></li>
<li><span class="title">option 2</span></li>
</ul>
Jquery
for (var i = 1; i <= 3; ++i) {
(function (n) {
$('.prod_switch_' + n).bind('click',function() {
$('#prod_switch_' + n).removeClass('hidden');
$('#prod_switch_' + n).addClass('visible');
});
})(i);
}
html
<div class="product_display visible" id="prod_switch_1">content</div>
<div class="product_display visible" id="prod_switch_2">content</div>

EDIT
Read the question completely wrong the first time :P You shouldn't need to change any HTML, just take a look at this JS.
Use JS to remove the active class from all elements before adding it to the clicked one.
JS:
for (var i = 1; i <= 3; ++i) {
(function (n) {
$('.prod_switch_' + n).bind('click',function() {
$('#prod_switch_' + n).removeClass('hidden');
$('.product_display').removeClass('visible');
$('#prod_switch_' + n).addClass('visible');
});
})(i);
}

To hide any visible product_display divs on list item on click, try:
$('.product_dynamic a').on('click', function(evt) {
$('.product_display.visible').removeClass('visible'); // hide all visible product_display divs
var targetID = $(evt.target).attr('class'); // get ID of element to show
$('#' + targetID).addClass('visible'); // show that element
});

$(".list_male a").click(function(event){
event.preventDefault();
$(".product_display").removeClass("visible");//HIDE ALL CONTENTS
var new_content=$(this).data("content");//GET ID FROM NEW OBJECT TO ADD visible CLASS
$("#"+new_content).addClass("visible");//SHOW NEW CONTENT
return false;
});
.visible{
display:block !important;
}
.product_display{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul class="product_dynamic list_male">
<li><span class="title">option 1</span></li>
<li><span class="title">option 2</span></li>
</ul>
<div class="product_display" id="content_1">content 1</div>
<div class="product_display" id="content_2">content 2</div>

How can I toggle style(s) of a class?

I have a list of paragraphs in a chatbox:
<div id=chatbox>
<p><i>15:21</i><b data-c=john>john</b>: hello jack</p>
<p><i>15:22</i>i want to tell you something</p>
<p><i>17:17</i><b data-c=jack>jack</b>: hi john.</p>
<p class=hidden><i>20:15</i>Ο <span data-c=server>server</span> alex joined the chat</p>
<p><i>17:17</i><b data-c=alex>alex</b>: hi all of you.</p>
</div>
and I want to have a toggle button in order to show/hide the hidden elements. Is there a way to toggle the style of hidden class from display:none to display:inline and backwards?
Notice that if i change all existing class=hidden to visible, when AJAX brings a new hidden line, it will still be hidden in contrast with previous elements. Is there a way to change the content of a class style?

It's a really bad idea to make javascript iterate through all of the elements to change the display when you can do it really easily by just toggling a class on a parent element.
Here's the codepen demo
When the button is clicked, you can just toggle a showHidden class on the #chatbox element, and use CSS to hide or display all of the hidden items inside it.
CSS:
.hidden {
display: none;
}
#chatbox.showHidden .hidden {
display: inline;
}
jQuery:
$(document).ready( function() {
$('.toggleButton').on('click', function(){
$('#chatbox').toggleClass('showHidden');
});
});

Add a button
<div id=chatbox>
<p><i>15:21</i><b data-c=john>john</b>: hello jack</p>
<p><i>15:22</i>i want to tell you something</p>
<p><i>17:17</i><b data-c=jack>jack</b>: hi john.</p>
<p class=hidden><i>20:15</i>Ο <span data-c=server>server</span> alex joined the chat</p>
<p><i>17:17</i><b data-c=alex>alex</b>: hi all of you.</p>
</div>
<button id="show_hidden">Show Hidden</button>
change the style for that class, and any future elements with that class
var button = document.getElementById('show_hidden'),
hidden = true;
button.addEventListener('click', function() {
var st = document.getElementById('myStyle');
if (st) {
st.innerHTML = '.hidden { display: '+ (hidden?'block':'none') +'; }';
}else{
var css = '.hidden { display: block; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
style.id = 'myStyle';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
button.innerHTML = (hidden ? 'Hide' : 'Show');
hidden = !hidden;
}, false);
FIDDLE

if using jquery look up .toggle here http://api.jquery.com/toggle/
also see here for javascript only answer: Jquery .toggle replacement code

Using Javascript if statements with and operator and selectors to create navigation bar

i'm trying to create my own navigation bar using Javascript, this is what I have so far.
$(document).ready(function() {
<nav class="menuL">
<ul id="menu">
<li><span></span>portfolio</li>
<ul id="submenu">
<li id="first">Wine</li>
<li id="second">Landscape</li>
<li id="third">Divers</li>
</ul>
<script>
$('#submenu').hide();
</script>
<script>
if ($('#portmenu').mouseover() || $('#first').mouseover() || $('#second').mouseover() || $('#third').mouseout()) {
$('#submenu').show();
} else {
$('#submenu').hide();
}
});
</script>
The submenu is infact being hidden but when I hover over portmenu, the submenu does not appear.. any ideas on what is wrong? I'm new to javascript so I have no idea if im using the selectors, OR operators and the if statements correctly.
Basically what I'm trying to do is, if the main portmenu is hovered over or if first, second and third are being hovered over, then show the sub menu. Otherwise, hide it. I'm trying to do this because if I just create a function which shows the submenu if portmenu is being hovered over, then the moment I hover of the text 'portfolio' the submenu goes away.

You can do it CSS only:
#menu > #submenu{
display: none;
}
#menu:hover > #submenu{
display: block;
}
DEMO: http://jsfiddle.net/Wp5sF/

jsFiddle Demo
You should probably do something more along these lines by taking advantage of jQuery's hover:
$('#submenu').hide();
$('#portmenu, #first, #second, #third').hover(function(){
//in
$('#submenu').show();
},function(){
//out
$('#submenu').hide();
});

Here is my suggestion to fix your code.
(Demo here)
$(document).ready(function(){
$('#submenu').hide();
$('#menu').on('mouseover', function (){$('#submenu').show()});
$('#menu').on('mouseout', function (){$('#submenu').hide()});
});

jQuery find div help

I am currently building a menu bar that consists of icons that show a contextual submenu when hovered over. Essentially, when hovering over an icon a popup menu/tooltip appears (with more options), but the icon itself should be clickable as well.
So far, I use the following HTML construct and jQuery for each menu item:
<div id="profile" class="menu-item">
<div id="profile-tip" class="tip">
**insert profile menu options**
</div>
</div>
<div id="search" class="menu-item">
<div id="search-tip" class="tip">
**insert search menu options**
</div>
</div>
and
$(".menu-item").hover(function() {
$(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
$(this).find("div").hide();
});
});
What I wish to do is to change the HTML to look as follows (so I can apply an onClick link to the "profiles" div):
<div id="profile" class="menu-item" onclick="window.location = 'profile.php'"></div>
<div id="profile-tip" class="tip">
**insert menu options**
</div>
However, I don't know how to modify the jQuery to find the matching div to display when hovered over. The associated tooltip/popup menu div will always be xxxx-tip (where xxx is the name of the parent div).
As an example, I imagine it will look something like this (keep in mind I know very little about jQuery so I'm well aware this will look stupid):
$(".menu-item").hover(function() {
$.find("div").attr('id'+"-tip").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
$.find("div").attr('id'+"-tip").hide();
});
});
To summarise: I need the jQuery modified to show the div based on the parent div's ID + the string "-tip"
Hopefully that isn't too confusing. Any help GREATLY appreciated :)

Not sure I understand completely what you want, but maybe try something a little more like this:
$(".menu-item").hover(
function() {
$(this).find(".tip").fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$(this).find(".tip").hide();
}
);
Edit: If the tip element is not a child of the menu item div, this could work:
$(".menu-item").hover(
function() {
$('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$('#' + this.id + '-tip').hide();
}
);

Instead of finding the name of the div in the PARENT of the thing you're hovered over, use jQuery to find the tooltip that is a CHILD of the thing you're hovered over...search down the DOM, instead of UP.
Use jQuery's $(this) operator...
$('.menu-item').hover(function(){
$(this).find('.tip).fadeIn();
},
function() {
$(this).find('.tip).fadeOut();
});

I'm not 100% clear on the goal here but you can get your div by ID as shown here:
$(".menu-item").hover(function()
{
$(this).find(".tip").fadeIn("fast").show();
});
Or in CSS:
.menu-item .tip
{
display: none;
}
.menu-item .tip:hover,
.menu-item:hover .tip
{
display: auto;
}