Develop Reference

jQuery Accordion Grid that opens full width

I have a jQuery Accordion and my problem is two-fold.
When you click on the persons name to close the div (after you've clicked to open it) it closes then slides the whole window up. I don't want it to slide the whole window up.
When you click on the person's image to open the div and then click to close it, the div closes but then opens again right away and the whole window slides up.
My jQuery:
jQuery(function($){
$(document).ready(function() {
// do something...
function close_accordion_section() {
jQuery('.accordion .accordion-item .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = jQuery(this).attr('href');
if(jQuery(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
jQuery(this).addClass('active');
// Open up the hidden content panel
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
});
And my HTML looks like this:
<div class="accordion"><!-- THUMBNAIL -->
<div class="accordion-item">
<a class="accordion-section-title" href="#accordion-1">
<img src="http://placehold.it/150x150" alt="First Last" width="150" height="150" />
</a>
<span class="accordion-section-name">
<a class="accordion-section-title" href="#accordion-1">First Name</a></span>
<span class="accordion-section-expertise">Expertise</span>
</div>
<!--end .accordion-item-->
<!-- ABOUT -->
<div id="accordion-1" class="accordion-section-content">
<div class="advisors">
<ul class="advisors">
<li>Marketing and Communications</li>
<li>Sales and Business Development</li>
<li>Finance</li>
<li>Startup Strategy</li>
</ul>
</div>
<div class="about">
<p class="about">About</p>
Biography
</div>
Does anyone know why this is happening?
Edited to add new function:
jQuery(function($){
$(document).ready(function() {
// do something...
function close_accordion_section() {
jQuery('.accordion .accordion-item .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e) {
e.preventDefault();
var currentAttrValue = jQuery(this).attr('href');
currentAttrValue = currentAttrValue.substring(1, currentAttrValue.length);
jQuery("#" + currentAttrValue).slideToggle();
});
});
return false;
});
This entire window is still sliding up for me.

add return false; after e.preventDefault();

Hope this will work for you,
jQuery('.accordion-section-title').click(function(e) {
e.preventDefault();
var currentAttrValue = jQuery(this).attr('href');
currentAttrValue = currentAttrValue.substring(1, currentAttrValue.length);
jQuery("#" + currentAttrValue).slideToggle();
});

I think what is happening is that the click event on the anchor element is not being stopped and because of which the page tries to navigate to the id of the element passed as href param, and hence it scrolls up.
So you should try stopping the click event from bubbling up.
So either you can use e.preventDefault(); or return false;
As shown in this DEMO.

Jquery: Show related div when you click and hide others

I have 2 divs with different content. I want to show the related div when I click on the link. It's showing both divs at the moment and it was supposed to show only the related one.
jsfiddle
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$('div.tip-2').fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
HTML
<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is one!</p>
</div>
<br/><br/>
<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is two!</p>
</div>

Make the script understand its relation. Change it to:
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$this = $(this);
$('div.tip-2').fadeOut(200, function () {
$this.next('div.tip-2').fadeIn(200);
});
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
Fiddle: http://jsfiddle.net/praveenscience/g25hsdw6/4/

Try this
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$("div.tip-2").hide();
$(this).next().fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
updated Fiddle

Please try this:
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$("div.tip-2").hide();
$(this).next('.tip-2').fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
http://jsfiddle.net/Rino_Raj/g25hsdw6/5/

How can I toggle the element that is clicked and hide all others?

I want to hide any visible span elements if any is visible, and toggle it again if a element is clicked
<div class="item">
element1 <span>span1</span>
<br>
</div>
<div class="item">
element2 <span>span2</span>
<br>
</div>
<div class="item">
element3 <span>span3</span>
<br>
</div>
<div class="item">
element4 <span>span4</span>
<br>
</div>
JS
$('.item span').hide();
var all_spans = $('.item a').parent().find('span');
$('.item a').click(function(e) {
e.preventDefault();
// hide all span
all_spans.hide();
$this = $(this).parent().find('span');
// here is what I want to do
if ($this.is(':hidden')) {
$(this).parent().find('span').show();
} else {
$(this).parent().find('span').hide();
}
});
live example http://jsfiddle.net/BGSyS/
the issue is when I click for example 'element 1' 'span1' is still visible and I want to toggle this

$('.item span').hide();
$('.item a').click(function(e){
e.preventDefault();
// hide all span
var $this = $(this).parent().find('span');
$(".item span").not($this).hide();
// here is what I want to do
$this.toggle();
});
Check demo
Update with explanation:
The problem is when you hide all spans, you also hide the current span => all spans have the same state (hidden), and your next line display it again. You have to exclude the current element when hiding and use toggle method to toggle its state (simpler than using if to check)
Another problem is try to avoid implicit global by using var to declare $this:
var $this = $(this).parent().find('span');

It can be much simpler than that: Updated Fiddle
var all_spans = $('.item span').hide();
$('.item a').click(function(e){
var thisSpan = $(this).parent().find('span'),
isShowing = thisSpan.is(":visible");
// Hide all spans
all_spans.hide();
// If our span *wasn't* showing, show it
if (!isShowing) {
thisSpan.show();
}
e.preventDefault();
});
The main problem with your code was that you were checking whether the a element was visible, rather than checking whether the span was.
Your code also fell prey to The Horror of Implicit Globals on this line:
$this = $(this).parent().find('span');
...which creates a global variable $this because you didn't declare it anywhere.

You can hide all the spans by using a span selector, then using the $(this) keyword to find the span next to the clicked link:
$(".item a").click(function() {
// Hide all item spans
$(".item span").hide();
// Show the element next to this
$(this).next().show();
});

begin snippet: js hide: false
language: lang-js
function itemshow(n,e){
var idx = "num_"+n;
$(".item_title").each(function(){
var idn = $(this).next().attr("id");
if (idn == idx){
$("#"+idn).toggle();
}else{
$("#"+idn).hide();
}
});
}
language: lang-css
.item_desc{
display: none;
}
language: lang-html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="div_body">
<div class="item_title" onclick="itemshow(1,this)">
1) Question
</div>
<div class="item_desc" id="num_1">
Answer
</div>
<div class="item_title" onclick="itemshow(2,this)">
2) Question
</div>
<div class="item_desc" id="num_2">
Answer
</div>
<div class="item_title" onclick="itemshow(3,this)">
3) Question
</div>
<div class="item_desc" id="num_3">
Answer
</div>
</div>
end snippet

Why not load my external content in a HTML wih jquery?

I have a HTML page with a vertical menu. I would like to click on a menu item to open between div tag content item.
This is the HTML
<div id="navigation">
<ul id="list-links">
<li ><a id="pollo" href="">Pollo</a></li>
<li><a id="tacchino" href="">Tacchino</a></li>
<li><a id="prodotti" href="">Prodotti</a></li>
</ul>
<div id="contentPro">
</div>
</div>
And this the JS:
$('#list-links li a' ).click(function(){
$clicked = $(this);
var idToLoad = $clicked.attr("id")
var url=idToLoad+'.html';
$('#contentPro').load(url);
});
Why the external HTML don't load between DIV tag??thanks

Wrap your code inside ready event like
$(document).ready(function(){
$('#list-links li a' ).click(function(e){
e.preventDefault();
$clicked = $(this);
var idToLoad = $clicked.attr("id")
var url=idToLoad+'.html';
$('#contentPro').load(url);
});
});

When you click on anchor tag <a> page gets redirected. You have to stop that action using event.preventDefault();
Here is the updated code
$('#list-links li a' ).click(function(event){
event.preventDefault();
$clicked = $(this);
var idToLoad = $clicked.attr("id")
var url=idToLoad+'.html';
$('#contentPro').load(url);
});
If the problem is not solved then you should check whether the path for pollo.html, tacchino.html and prodotti.html is correct?

remove class of group of links once another link is clicked

These group of links are my nav elements. var make_button_active removes and inserts class active once clicked into the link. With CSS, class active assigns an orange color to the text of the link. I have another link which is outside of this group. Its a logo as link which goes to #home. I would like that once this is clicked the class active is removed from the links inside the ul.menu. This way the nav elements wont remain colored in orange when #home is clicked. I've tried it alone but I'm a beginner with javascript.
Could you help me with this quest?
HTML:
<nav>
<div id="logo">
<img src="_img/logo.png" alt="DR logo" />
</div>
<div id="categories">
<ul class="menu">
<li>ABOUT ME</li>
<li>SHOWCASE</li>
<li>HOW DO I WORK</li>
<li>LETS MEET</li>
</ul>
</div>
<hr>
</nav>
CSS:
.menu li.active a {
color: #ff530d;
}​
JQUERY:
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
);
//Add the clicked button class
$(this).addClass('active');
}
var classOut = function()
{
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
</script>

I rewrote your entire JavaScript, does this help?
I changed your JavaScript to:
$(document).ready(function()
{
$('.menu a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
$(this).addClass('active');
});
$('#logo > a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
});
});
​

At first: jQuery !== JavaScript
Also, #home wont select your home link, because it does not select the href, but the id.
Use instead $("#logo a").click(classOut);
Also, your function make_button_active should look something like this:
var make_button_active = function() {
$('.active').removeClass('active');
$(this).addClass('active');
}
You don't need to iterate over all the siblings, your active can only be on one element at once, you can just select this and remove the class before setting it on the newly selected element.
Finally, you do not necessarily have to do a function expression var make_button_active = function(){...}, a function declaration is completely okay in your case: function make_button_active(){...}. However, often it is good to use function, and not like Sam did using anonymous functions, because you can then reuse those functions easily.
Your entire script should look like this:
<script type="text/javascript">
function make_button_active(){
$('.active').removeClass('active');
$(this).addClass('active');
}
function classOut(){
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#logo a").click(classOut);
});
</script>

There is no element with ID of home in your markup:
<img src="_img/logo.png" alt="DR logo" />
You are using ID selector and your selector doesn't select the element with #home href attribute. You can add ID to your element or use attribute selector:
$("a[href='#home']").click(classOut);
Also you don't need to use each method:
var make_button_active = function() {
$(this).addClass('active').siblings().removeClass('active')
}
var classOut = function() {
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
http://jsfiddle.net/hJdXU/