Having trouble with accordion with Jquery - javascript

My accordion works fine but I try to click on an already opened tab and it doesn't close back and also I want my accordion to close as one tab is opened the rest of the other tabs close.
Here is the code:
$(function(){
var heading = $('h1');
heading.on('click', function(event){
var target = $(event.target);
$('div.content').addClass('hidden');
target.next('div.content').removeClass('hidden');
})
});

Make sure your HTML code is like below,
<h1>Title 1</h1>
<div class="content hidden">
Title 1 Content
</div>
<h1>Title 2</h1>
<div class="content hidden">
Title 2 Content
</div>
<h1>Title 3</h1>
<div class="content hidden">
Title 3 Content
</div>
add this jquery
$(function(){
// hiding rest of the content block (optional), its already hidden in html code by css class
$('div.content').addClass('hidden');
$('h1').on('click', function(){
if($(this).next('div.content').hasClass('hidden')){
$(this).next('div.content').removeClass('hidden').addClass('visible');
}else{
$(this).next('div.content').removeClass('visible').addClass('hidden');
}
});
});

Related

How to show a specific section from a link that is hidden

I have multiple links that go to the same page, however I want different sections of that page to show (preferably at the top of the page). The issue is, those sections are hidden on page load and so is the container they are in. I solved how to get the container to show, but it shows all of the different sections when I only want the one I clicked on, from the link, to show. ie:
I have these links:
Service 1
Service 2
Service 3
Then on the serviceCheck1 page I have this HTML:
<div id="service-display-box">
<div id="service-display-box-container">
<div class="service-item-box" id="service1">
<div class="service-item-title">Service 1</div>
</div>
<div class="service-item-box" id="service2">
<div class="service-item-title">Service 2</div>
</div>
<div class="service-item-box" id="service3">
<div class="service-item-title">Service 3</div>
</div>
<div class="service-item-box" id="service4">
<div class="service-item-title">Service 4</div>
</div>
<div class="service-item-box" id="service5">
<div class="service-item-title">Service 5</div>
</div>
<div class="service-item-box" id="service6">
<div class="service-item-title">Service 6</div>
</div>
</div>
</div>
If I would click on the link that says, Service 2, I would want the service-display-box to show and then the #service2 div to show, then all of its siblings to not show.
Here is my javascript:
$(function(){
//get the section name from hash
var sectionName = window.location.hash.slice(1);
//then show the section
$('#service-display-box').show();
//$('#' + sectionName ).show();
$('#service' + sectionName).show().siblings().hide();
})
/*var index = location.hash.indexOf('#service');
if(index > -1) {
var serviceId = parseInt(location.hash.substring(index));
if(serviceId) {
$('#service-display-box').show();
$('#service' + serviceId).show().siblings().hide();
}
}*/
It appears as though your selector for the section is not formed correctly. Essentially this happens:
You click on Service 1
The serviceCheck1 page loads.
This line runs: var sectionName = window.location.hash.slice(1);
sectionName now contains "service1"
This line runs: $('#service' + sectionName).show().siblings().hide();
This evaluates to $('#serviceservice1').show().siblings().hide();
The browser can't find an element with the id serviceservice1
Nothing happens :)
Instead, since window.location.hash contains #service1 already, just run the following:
$(window.location.hash).show().siblings().hide();
Which will find the appropriate element, show it, and hide its siblings.
You could try using CSS to control the visibility, and simply toggle a class with your JS.
JS:
$('#service-display-box').addClass('visible');// Make the wrapper visible
$('#service-item-box').removeClass('visible');// Double-check all the other boxes are still hidden
$('#service' + sectionName).addClass('visible');// Make the target box visible
CSS:
#service-display-box,
#service-item-box{
display:none;
}
#service-item-box.visible,
#service-item-box.visible{
display:block;
}

Collapsible container/column. Adding more than one link

I'm trying to create a drop down effect similar to this image: GIF, however with what I have so far: EXAMPLE I can't seem to figure out a way to add more than one link, if I do add just another content div it doesn't show up.. Hope someone can help, been losing sleep over this haha. Thanks
HTML:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
</div>
JS:
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $(this).next();
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
What I would try:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
<div class="content" onclick="initContent('exampleNew')"><em>Example Project 2</em></div>
</div>
Just put all your links in a single content div:
https://jsfiddle.net/sfcm95yz/3/
<div class="content">
<div class="item" onlclick="initContent('example')">
<em>Example Project</em>
</div>
<div class="item" onlclick="initContent('example2')">
<em>Example Project 2</em>
</div>
</div>
It's because you are sliding down the content div that is right after the header class element ($content = $(this).next();), which applies a display: block to it. If you add another content div, it isn't going to be right after that header and so won't be shown.
You can either change your JavaScript to target all content divs, or rearrange your HTML, something like this:
<div class="container">
<div class="header">Projects</div>
<div class="content">
<div onclick="initContent('example')">
<em>Example Project</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 2</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 3</em>
</div>
</div>
</div>
If you want to modify your JS and keep the existing markup, .nextAll() will select all of $header's siblings (.next() only selects one sibling). You can also add a selector argument to be sure you only select elements with the class "content".
$(".header").click(function() {
$header = $(this);
//getting the sibling ".content" elements
$content = $(this).nextAll(".content");
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});

JQuery hide() not persisting after hide event

I'm trying to hide a visible section then show a hidden section using JQuery .hide() and .show(). When the event fires (on clicking an image) it only hides the visible section momentarily, then becomes visible again with the previously hidden section now visible below the first visible section. Based on the docs I've read and some tutorials I've watched this shouldn't be happening.
HTML:
<div class="transition-div">
<section class="project-section">
<div class="project-wrapper" id="project-one">
<div class="desc-text">
<h2>Header</h2>
</div>
<div class="project-image-wrapper">
<img class="project-image" id="project-img-one" src="images/img1.png">
<button class="project-button">Button
</button>
</div>
</div>
</section>
<section class="project-section hidden">
<div class="project-wrapper">
<div class="desc-text">
<h2>Header</h2>
<p>Some description text</p>
</div>
<div class="project-image-wrapper">
<img class="project-image" src="images/img1.png">
</div>
</div>
</section>
</div>
JS:
$('.hidden').hide();
var slideSection = function() {
$('.project-image-wrapper').click(function() {
var $parentDiv = $(this).parents('.transition-div');
var $childToShow = $parentDiv.find('.hidden');
var $childToHide = $childToShow.siblings('.project-section');
$childToHide.hide(300, hideActiveSection());
function hideActiveSection() {
$childToHide.addClass('hidden');
$childToShow.show(300, function() {
$(this).removeClass('hidden');
});
}
});
};
slideSection();
How would I get the section I want to hide to do so persistently until I click the currently visible project image to show it? Could my CSS be interfering with what I want to do here? If so I'll post the code. Thanks!

How Can I Get a Jquery Mobile Button to Open Specific Collapsible List Id?

I am trying to code a Jquery mobile application (latest release) so when the JQM button is clicked, a SPECIFIC collapsible list id is opened and positioned into view. This button should allow for toggle. The list id to be opened is id=set2. Please help I have checked everywhere with no luck.
Here is my current code...
JQM Button Code...
Find It
HTML
<div data-role="collapsible-set" data-content-theme="d" id="set">
<div data-role="collapsible" id="set1" data-collapsed="true">
<h3>Header 1</h3>
<p>SOME CODE HERE</p>
</div>
<div data-role="collapsible" id="set2" data-collapsed="true">
<h3>Header 2</h3>
<p>SOME CODE HERE</p>
</div>
</div>
JS
<script type="text/javascript">
$(document).on("pageinit", function() {
$("a#expand").click(function() {
$("#set2").trigger( "expand" );
});
});
</script>
i created a fiddle for you that works:
http://jsfiddle.net/acturbo/FZbyh/
here is the jquery code:
//$(document).on("pageinit", function() {
$().ready(function() {
// the "a" should not be needed
//$("a#expand").on("click", function() {
$("#expand").on("click", function() {
$("#set2").trigger( "expand" );
});
});
html:
Find It
<div data-role="collapsible-set" data-content-theme="d" id="set">
<div data-role="collapsible" id="set1" data-collapsed="true">
<h3>Header 1</h3>
<p>SOME CODE HERE</p>
</div>
<div data-role="collapsible" id="set2" data-collapsed="true">
<h3>Header 2</h3>
<p>SOME CODE HERE</p>
</div>
I was able to fix the issue. It was caused by the placement of the script code and id name "exapand", since this is a option for the trigger event the id must consist of a different name.

Javascript - jquery,accordion

<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?
You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();
I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>
Why not use slideToggle() instead of IF statements....
Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});

Categories