We Keep Coding

Show/hide multiple children classes for an individual parent click (Jquery)

I'm fairly new to Javascript/Jquery and I'm trying to hide multiple children/adjacent classes when a specific parent class is clicked.
Here's my HTML
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
</div>
</div>
What I'm aiming to do is: When a user clicks one of the two smaller icons shown (pov_icon_small), for that individual icon: the classes pov_icon_small and pov_title_small will change to pov_icon_large and pov_title_large respectively. In the same time, I want the other 'large' icon and 'title' to revert back to the 'small' state
I've started calling some Javascript but I don't think I'm headed the right way:
$('.pov_icon_small').on('click', function (e) {
$(this).toggleClass("pov_icon_large");
});
Would anyone be willing to point me to the right direction?

To use individual click
$('.pov_icon_small , .pov_icon_large').on('click', function (e) {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
});
and for title the same way
$('.pov_title_small , .pov_title_large').on('click', function (e) {
$('.pov_title_large').not($(this)).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
To run both action on icon click use this
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
Note: be sure to include Jquery

You can add a common class icon for the icon div and title for the title div and following code will work,
$(".pov_icon_small").on('click',function(){
$(this).parent().siblings().children('div').each(function(value){
if($(this).hasClass('icon'))
$(this).addClass('pov_icon_small').removeClass('pov_icon_large');
else if($(this).hasClass('title'))
$(this).addClass('pov_title_small').removeClass('pov_title_large');
});
$(this).addClass('pov_icon_large').removeClass('pov_icon_small');
$(this).siblings('.title').addClass('pov_title_large').removeClass('pov_title_small');
});
Here as you can see, I am first getting parent of the icon clicked i.e. Your pav_icon div now I am changing for all the siblings now each div in the sibling. If it is Iicon changing icon classes as required if title changing title classes.

Determining which element was clicked and conditionally choosing which method to call

I am attempting to use JQuery to make 3 thumbnails into buttons that each open up their own page element with details regarding the picture.
Right now I have succeeded in making it so that any thumbnail causes a page element (of the class "description") to scroll open and closed when any thumbnail (from the class "thumbnail") is clicked.
How do I check which thumbnail is clicked on so that I can open a different description corresponding to that specific thumbnail? (This is what I was attempting to do with the "select").
var main = function() {
$('.thumbnail').click(function(select) {
var description = $('.game-descriptions').children('.description');
if( description.is(":hidden")) {
description.slideDown("slow");
}
else
description.hide();
});
}
$(document).ready(main);

Use a data attribute to specify what the thumbnail click is targeting, example: data-target="#game-1", add IDs to your descriptions that match and use data() to use the attribute value of #game-1 a jQuery selector.
Here is a demo
JS
$('.thumbnail').click(function() {
var gameId = $(this).data('target');
$(gameId).slideToggle().siblings(':visible').slideToggle();
});
HTML
<img class="thumbnail" data-target="#game-1" />
<img class="thumbnail" data-target="#game-2" />
<div class="game-descriptions">
<div id="game-1" class="description"></div>
<div id="game-2" class="description"></div>
</div>
Any toggling like toggle(), slideToggle(), fadeToggle() handles the is hidden or is visible

jsFiddle
The parameter to the click function is a jQuery event object, which can be useful in adding some event handling logic. However, within the context of the handler, this refers to the element which triggered the click event, and is typically sufficient for any targeted logic.
Assuming the thumbnails and descriptions have similarly named IDs, for example, you can do something like this:
$(function () {
$('.thumbnail').click(function (event) {
var descId = this.id.replace("thumb", "desc");
var description = $('.game-descriptions').children('#' + descId);
// or simply $("#" + descId);
description.toggle("slow");
});
});
HTML
<div>
<div class="thumbnail" id="thumb-1">Thumb 1</div>
<div class="thumbnail" id="thumb-2">Thumb 2</div>
<div class="thumbnail" id="thumb-3">Thumb 3</div>
</div>
<div class="game-descriptions">
<div class="description" id="desc-1">Description One</div>
<div class="description" id="desc-2">Description Two</div>
<div class="description" id="desc-3">Description Three</div>
</div>
Your technique for targeting the correct 'description' will depend on your actual DOM structure, however.
Also note that I substituted the toggle method for your if statement, as the logic you have is equivalent to what it does (i.e. toggling object visibility).

jQuery toggleClass conflict

For a new webdesign I have two 50% width slider div's as a menu, and I want to add/remove/toggle the 'open' class with jQuery. On the click of one of the .menul, the #left should have added class .open, unless #right:hover and the other way around. The first time you click it it works, but the second time you click it seems to be that the toggleClass is stuck / not updated... Does anyone know how to fix this?
Here's my HTML:
<div id='home'>
<div class='slide' id='left'>
<div class='wrap'>
<div class='text'><a class='menul' href='#sounds'>Savado <span>Sounds</span></a><br/>
<div class='subtext'>
<a class='menul' href='#artist'>Performing artist</a><br/>
<a class='menul' href='#composer' id='one'>Media Composer</a><br/>
<a class='menul' href='#producer' id='two'>Band Producer</a></div>
</div>
<div class='inner'></div>
<a class='full' href='#home'></a>
</div>
<div class='logo' id='logol'>
<a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>
</div>
</div>
<div class='slide' id='right'>
<div class='wrap'>
<div class='text'><a class='menur' href='#designs'>Savado <span>Designs</span></a><br/>
<div class='subtext'>
<a class='menur' href='#management'>Content Management</a><br/>
<a class='menur' href='#portfolio' id='one'>Design Portfolio</a><br/>
<a class='menur' href='#engines' id='two'>Search Engines</a></div>
</div>
<div class='inner'></div>
<a class='full' href='#home'></a>
</div>
<div class='logo' id='logor'>
<a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>
</div>
</div>
</div>
And here's my jQuery:
$('.menul').click(function(){
$('#left').addClass('open');
$('#right').removeClass('open');
$('#right').hover(function(){$('#left').toggleClass('open')});
});
$('.menur').click(function(){
$('#right').addClass('open');
$('#left').removeClass('open');
$('#left').hover(function(){$('#right').toggleClass('open')});
});
And here's the fiddle: http://jsfiddle.net/ytexqtyg/2/
Any help would be very much appreciated!

I had another look and you will have to add another class or data attribute to differentiate between an active-and-closed menu and a active-and-open menu or this won't work.
The active "flag" is to ensure you only toggle the .open class on an active menu.
In addition you also need to keep unbinding the hover event as otherwise you are constantly re-binding the hover, causing the element to have multiple hover events bound which then will all execute and contradict each other.
Note that when unbinding the hover event using jQuery off('hover')/unbind('hover') doesn't work and you must unbind the mouseenter and mouseleave events as those are bound by jQuery when using selector.hover(...)
The new JavaScript code is as follows:
$('.menul').click(function () {
$('#left').addClass('active');
$('#left').addClass('open');
$('#right').removeClass('active');
$('#right').off('mouseenter mouseleave').hover(function(){
if($('#left').hasClass('active')){
$('#left').toggleClass('open');
}
});
});
$('.menur').click(function () {
$('#right').addClass('active');
$('#right').addClass('open');
$('#left').removeClass('active');
$('#left').off('mouseenter mouseleave').hover(function(){
if($('#right').hasClass('active')){
$('#right').toggleClass('open');
}
});
});
DEMO - Using a separate indicator for an active menu

Divs cannot be made visible

I have a overlay page where I have one parent div and children div like this
<div id="completeBlock" style="display:block">
<div id="id1" style="display:block">
This is div one
</div>
<div id="id2" style="display:none">
This is div two
</div>
<div id="id3" style="display:none">
This is div three
</div>
</div>
and separate links to show the divs
<a onclick=doChangeDiv(id1)>link one</a>
<a onclick=doChangeDiv(id2)>link two</a>
<a onclick=doChangeDiv(id3)>link three</a>
My aim is to show one div at a time and make others none.It works fine in all browsers but in firefox
it works for the very first time I open the page.If I close the page and open it again,
the hidden divs cannot be made visible and I got an error "TypeError: can't access dead object"
My jquery script is
function doChangeDiv(fromId){
$('#completeBlock').children().each(function() {
if($(this).css('display') != 'none')
{
var hideId = '#'+$(this).attr('id');
$(hideId).hide();
}
});
$(fromId).attr('display','block');
$(fromId).show();
}
Please help me to sort out this problem.

See this : http://jsfiddle.net/uD9mU/1/
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
var fromId = $(this).attr("data");
//alert(fromId);
$('#completeBlock').children().hide().filter('#'+fromId).fadeIn('slow');
});
});

Show a div when a mouseover on a link

If I mouseover on a link it has to show div.
My problem is that I have to show divs in all of the links inside a page. For each link I have to show a different div.
How to do this using javascript?

Since, your question does not specify anything. I will give a simplest solution I can. That is, with plain CSS, no JS needed.
Here is a demo
Markup
<a href="#">
Some
<div class="toshow">
Hello
</div>
</a>
<a href="#">
None
<div class="toshow">
Hi
</div>
</a>
CSS
.toshow {
display:none;
position: absolute;
background: #f00;
width: 200px;
}
a:hover div.toshow {
display:block;
}
You should not try to rely on script as much as possible. This is a very simple example, with displays the use of :hover event of the link.

Steps can be:
Make multiple divs all with different id.
Give style="display:none;" to all div.
Make links to show respective div.
In onMouseOver of link call js function which changes display property to block of proper div. Ex.:- document.getElementById("divId").style.display = "block"; And for all other div set display:none; in that js function.
Sample code:-
Your links:
Div 1
Div 1
Your divs:
<div id="myDiv1">Div 1</div>
<div id="myDiv2">Div 2</div>
JS function:
function Changing(i) {
if(i==1){
document.getElementById("myDiv1").style.display = "block";
document.getElementById("myDiv2").style.display = "none";
} else {
document.getElementById("myDiv1").style.display = "none";
document.getElementById("myDiv2").style.display = "block";
}
}
If you have more divs then you can use for loop in js function instead of if...else.

look at jquery each
<div id=div-0" class="sidediv" style="display:none" > Div for first link </div>
<div id=div-1" class="sidediv" style="display:none"> Div for second link </div>
<div id=div-2" class="sidediv" style="display:none"> Div for third link </div>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
and essentially do something like this
$('.linkclass').each(function(i,u) {
$(this).hover(function()
{
$('#div-'+i).show();
}, function() {
$('#div-'+i).hide(); //on mouseout;
})
});

Edit: oops ...this will need jquery. dont know why I assumed jquery here.
You can give ids to all the links such as
<a id="link-1"></a>
<a id="link-2"></a>
<a id="link-3"></a>
and so on ..
and similarly to div elements
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
and so on ..
then
$("a").hover(function () { //callback function to show on mouseover
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).show();
},
function () { //if you want to hide on mouse out
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).hide();
}
);