jQuery Accordion Grid that opens full width - javascript

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.

Related

My Accordion doesnt seem to work. Clicked but nothing happen. it doesnt go thru the js

HTML:
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">Test</a>
<div class="accordion-section-content" id="accordion-1"></div>
</div>
</div>
My JS (which i took from http://inspirationalpixels.com/tutorials/creating-an-accordion-with-html-css-jquery):
jQuery(document).ready(function() {
function close_accordion_section() {
jQuery('.accordion .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();
jQuery(this).addClass('active');
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
The code that you've posted looks fine to me. Be sure to include the jQuery JS file on your page at the end of the tag.

How do direct links to tabs (made with JS) using #anchors?

I have site with some info-tabs based on a template. Tabs have some anchors example.com/#convey, but when I try to use direct link to some tab using #anchor - nothing happens, because the tabs are using JS.
JS:
/* fading the content in using a sub-menu */
$('.content-fade-menu a').click(function(){
var href = $(this).attr('href');
var target = $('.content-fade').find(href);
$('.content-fade-menu a').removeClass('active');
$(this).addClass('active');
$('.content-fade .content-fade-panel').hide();
$(target).fadeIn('fast');
return false;
});
HTML of menu:
<ul class="sub-menu content-fade-menu">
<li>Personal Injury</li>
<li>Employment</li>
</ul>
HTML of one non-active tab and one active tab:
<div class="content-fade">
<div class="content-fade-panel" id="pi" style="display: none;">
Non-active tab
</div>
<div class="content-fade-panel" id="employment" style="display: block;">
Active tab
</div>
</div>
What do I need to do, to make links, like example.com/#anchor, work?
Ok, I've found the answer.
//Take #anchor from url and find right block
var loc = window.location.hash;
if (loc != "") {
var href = loc;
var target = $('.content-fade').find(href);
//Unactivate first tab
$('.content-fade-menu a').removeClass('active');
//Activate right tab
$('.content-fade-menu a[href="'+href +'"]').addClass('active');
$('.content-fade .content-fade-panel').hide();
$(target).fadeIn('fast');
//Scroll to the h3 of the activated block
var zagolovok = $(target).find('h3');
$('html, body').animate({scrollTop: $(zagolovok).offset().top}, 300);
}
That's all.

Jquery menu doesnt open on touch screen devices

I have a drop down menu where the user selects a location and it scrolls to the div to reveal the address (10 different locations).
This works well in a desktop browser. However on the ipad, iphone and nexus it doesnt work because of touch screen.
This is my code:-
<html>
<div class="location">
<ul>
<li>Select an Office
<ul class="officeselect">
<li><a data-emailaddress="" data-address='<span class="address">99 Walnut Tree Close</span>
<span class="address">Guildford</span>
<span class="address">Surrey</span>
<span class="address">GU1 4UQ</span><br>
<span class="address">T: +44 1483 881500</span>
<span class="address">info#petroplan.com</span>' href="">UK Head</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="span4 alpha">
<div class="addresstitle">
<h3>Address</h3>
</div>
<div class="address">
</div>
</div>
</html>
<script>
// Scroll down to map and address function
$(".location ul li ul a").click(updateAddressDisplay);
function updateAddressDisplay(src) {
$('.office-sel-cont .chooser').text($(this).text());
var target = $(".address");
var source;
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
if (src === null)
source = $(".black-sectors li a.adr-src:eq(0)");
else
source = $(this);
target.fadeOut();
target.html(source.data("address") + source.data("emailaddress"));
target.fadeIn();
var chooser = $(this).parent().parent().parent().find('.chooser');
if (chooser.hasClass('open')) {
chooser.removeClass('open');
chooser.next($('.black-sectors')).animate({
'top': '60px',
'opacity': 0
}, 600, 'easeOutQuint', function() {
chooser.next($('.black-sectors')).toggle();
});
return false;
} else {
}
return false;
}
</script>
And I used this below from this website, but it's still dodgy.
<script>
$('.location ul li ul a').on('click touchend', function(e) {
e.preventDefault();
var el = $(this);
var link = el.attr('href');
window.location = link;
});
</script>
Thanks for your help.
this is the fiddle:-http://jsfiddle.net/ScVs9/
For your drop down list to work on a touch screen device you need to trigger the drop-down using a javascript click event rather than the css hover. Simple way would be create a class, called something like .active and then use a function like this:
$('.location a').on('click', function(){
$('.officeselect').toggleClass('active')
});
The active class would simply have visibility set to visible:
ul.officeselect.active {visibility:visible;}
The user should then be able to select the correct link and display the address as per usual.
I hope this helps

jquery relative a href="#" remove display block

<li><b>Arbeiten</b></li>
This is the link. When i click this it change the id of the div(#section17) from display none to block.
<li><b>Feiern</b></li>
Now if i click on a other link(#section15) it should change the display:block from #section17 to display:none again and the link(#section15) to display block
The page doesnt reload just the url change a little bit.
Can anyone help me?
<script type="text/javascript">
$("a").click(function () {
var addressValue = $(this).attr("href");
$(addressValue).css("display","block");
});
</script>;
DEMO: http://jsfiddle.net/gvee/qba7e/
HTML
<ul>
<li><b>section 17</b>
</li>
<li><b>section 18</b>
</li>
<li><b>section 19</b>
</li>
</ul>
<div id="sections-container">
<div id="section17">section 17</div>
<div id="section18">section 18</div>
<div id="section19">section 19</div>
</div>
JQuery
$('a').click(function (e) {
// Prevent jumping to anchor
e.preventDefault();
// Hide all other sections
$('#sections-container > div').css('display', 'none');
// Show only one we want
var addressValue = $(this).attr('href');
$(addressValue).css('display', 'block');
});
You have to cancel the link's default behaviour:
$("a").click(function (event) {
event.preventDefault();
var addressValue = $(this).attr("href");
$(addressValue).css("display","block");
});
your code should be like this
<script type="text/javascript">
function HideShow(ctrl) {
var addressValue = $(ctrl).attr("href");
$(addressValue).css("display", "block");
}
</script>
<li><b>Arbeiten</b></li>
<li><b>Feiern</b></li>
If you give all sections a class of sectionClass then hide all elements with this class and show the relevant one on click you should be in business.
$("a").click(function (e) {
e.preventDefault();
var addressValue = $(this).attr("href");
$(".sectionClass").hide();
$(addressValue).show();
});

JS slidetoggle on UL Tree

When i click on second item with slideToggle, first item close.
$(function() {
$('.toggleSitemap').find('ul').css('display','none')
$('.toggleSitemap').click(function(){
$(this).parent().find('ul').slideToggle('slow');
});
});
http://jsfiddle.net/qHZsZ/2/
I dont know how much will this help you. I also needed to implement accordian(toggle) in my MVC project once, and I used something like this:
View.aspx:
<div class='toggle' style="float: left">
<div style="float: left;clear:both;">
<br />
<span class="ulGroup" jqattr="<%:Group.Key %>" style="font-weight: bold;font-color: black;cursor: pointer"><img src="<%: Url.Content("~/Images/imageplus.gif")%>"/>
<%:Group.Key%></span>
</div>
<div class="togglebox" style="clear:both;" >
<!-- Write contents as you wish -->
<!-- as
<ul> test
<li>Test1></li>
<li>Test2></li>
<li>Test3></li>
</ul>
.
.
.
-->
</div>
</div>
And called a design.js (javascript file) as :
$(document).ready(function () {
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over span
$(".ulGroup").click(function () {
var valueText = $(this).attr('jqAttr');
// slide toggle effect set to slow you can set it to fast too.
var x = $(this).parent().next(".togglebox").css("display");
if (x == "block") {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
else {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
$(this).parent().next(".togglebox").slideToggle("fast");
return true;
});
});
You're pretty close. I think the key ingredient you're missing is to prevent propagation of the click event.
Also, to make it a little less quirky, you only want the click event to fire if the target's direct parent has the toggleSitemap class.
$(function() {
$('.toggleSitemap').click(function(e){
if ($(e.target).parent().hasClass('toggleSitemap')) {
e.stopPropagation();
$(this).children('ul').slideToggle('slow');
}
});
});
Here's an example: http://jsfiddle.net/DkbNA/2/

Categories

Resources