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!
Related
I’m trying to build an accordion menu and for some reason I can’t get the accordion to function how I want.
Currently when the user clicks on the accordion div, the hidden-textarea div gets added with an active-accordion class wherever it's referenced.
How do I get the active-accordion class to only be added to the current clicked accordion div? Not all of them. I need to be able to toggle between each accordion div that is clicked.
Any help is gladly appreciated.
Thanks!
HTML
<div class="accordion-block">
<div class="container">
<div class="gallery-wrap">
<div class="item-accordion">
<div class="accordion">
<div class="title text accordion-title”>Title of Accordion</div>
<div class="animation-container">
<div class="hidden-textarea active-accordion”>
<div class="body text”>Lorem Ipsum </div>
<div class="buttonArrayV1”>Click Me</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-block">
<div class="container">
<div class="gallery-wrap">
<div class="item-accordion">
<div class="roles-description accordion">
<div class="title text accordion-title”>Title of Accordion</div>
<div class="animation-container">
<div class="hidden-textarea active-accordion">
<div class="body text”>Lorem Ipsum </div>
<div class="buttonArrayV1”>Click Me</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.active-accordion {
display: block !important;
}
.hidden-textarea {
display: none;
}
JS
TestJs.HorizontalAccordion.prototype.onResize = function() {
$(window).resize(function() {
if ($(window).width() < 1200) {
$('.accordion').on( "click", function(e) {
e.preventDefault();
e.stopPropagation();
$(".hidden-textarea").addClass("active-accordion");
// $('.hidden-textarea').removeClass("active-accordion");
// $('.hidden-textarea').toggle("active-accordion");
return false;
});
}
if ($(window).width() >= 1200) {
}
});
};
Update: I updated the onclick function and am able to toggle successfully. Now I just need to open 1 accordion not all of them.
Any help is gladly appreciated. Thank you.
$('.horizontalAccordionV1 .accordion').on( "click", function() {
event.preventDefault();
// create accordion variables
var accordion = $('.hidden-textarea');
// toggle accordion link open class
accordion.toggleClass("active-accordion");
// toggle accordion content
accordionContent.slideToggle(250);
});
Problem solved! Added this to my JS click function and removed everything else.
$(this).find('.hidden-textarea').toggleClass('active-accordion');
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');
}
});
});
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() {});
});
});
Afternoon guys, I am hoping you can help me put the finishing touches to this page. Basically I have four links - each of which will be linked to a different version of content - that will be displayed in the same 3 divs by way of togglevisibility. That is to say that onload, the first link’s content will be displayed (in the three divs) and then the aim is that when another of the four links is clicked, the visible content from the open link closes and the clicked link’s content opens instead. (One thing I have successfully avoided in the code I have so far - and am eager to avoid in the final model - is toggling the page to empty. That is to say if link1’s content is displayed and you click on link1 again, the content stays visible and does not simply toggle on and off.)
Now using the markup below I am oh so close (!) except for the following…
When the page loads the first link’s content is displayed as I want to be, but whenever you click one of the other 3 links it is only div1’s content that successfully loads while the other two divs become empty. I have attempted to alter the toggleVisibility coding (quite crudely I know!) so that each of the 4 links are dealt with as follows;
<a href=“#” onclick=“togglevisibility(‘link1div1’); togglevisibility(‘link1div2’);togglevisibility(‘link1div3’);”>Link 1</a>
Is there a way to fix this error from within the link line (above) so that clicking the link loads the corresponding content into all three divs and not just the first? I am sure it is something simple that I have overlooked or ill-coded!
Thanks very much for your time and advice in advance.
CSS
.section {display:none;}
#link1div1 {display:block;}
#link1div2 {display:block;}
#link1div3 {display:block;}
HTML
<a href=“#” onclick=“togglevisibility(‘link1div1’); togglevisibility(‘link1div2’);togglevisibility(‘link1div3’);”>Link 1</a>
<a href=“#” onclick=“togglevisibility(‘link2div1’); togglevisibility(‘link2div2’);togglevisibility(‘link2div3’);”>Link 2</a>
<a href=“#” onclick=“togglevisibility(‘link3div1’); togglevisibility(‘link3div2’);togglevisibility(‘link3div3’);”>Link 3</a>
<a href=“#” onclick=“togglevisibility(‘link4div1’); togglevisibility(‘link4div2’);togglevisibility(‘link4div3’);”>Link 4</a>
<div id=“div1”>
<div id=“link1div1” class=“section”></div>
<div id=“link2div1” class=“section”></div>
<div id=“link3div1” class=“section”></div>
<div id=“link4div1” class=“section”></div>
</div>
<div id=“div2”>
<div id=“link1div2” class=“section”></div>
<div id=“link2div2” class=“section”></div>
<div id=“link3div2” class=“section”></div>
<div id=“link4div2” class=“section”></div>
</div>
<div id=“div3”>
<div id=“link1div3” class=“section”></div>
<div id=“link2div3” class=“section”></div>
<div id=“link3div3” class=“section”></div>
<div id=“link4div3” class=“section”></div>
</div>
JS
<script type="text/javascript">
function toggleVisibility(selectedTab) {
var section = document.getElementsByClassName('section')
for(var i=0; i<section.length; i++) {
if(section[i].id == selectedTab) {
section[i].style.display = 'block';
} else {
section[i].style.display = 'none';
}
}
}
</script>
I would minimise the use of javascript and do that using css, like this:
DEMO HERE
javascript:
function clickHandler(lnk) {
document.getElementById('sections').className = lnk;
return false;
}
css:
#sections .section {display:none;}
#sections.link1 .link1,
#sections.link2 .link2,
#sections.link3 .link3,
#sections.link4 .link4 { display: block; }
html:
Link 1
Link 2
Link 3
Link 4
<div id="sections" class="link1">
<div id="div1">
<div id="link1div1" class="section link1">11</div>
<div id="link2div1" class="section link2">21</div>
<div id="link3div1" class="section link3">31</div>
<div id="link4div1" class="section link4">41</div>
</div>
<div id="div2">
<div id="link1div2" class="section link1">12</div>
<div id="link2div2" class="section link2">22</div>
<div id="link3div2" class="section link3">32</div>
<div id="link4div2" class="section link4">42</div>
</div>
<div id="div3">
<div id="link1div3" class="section link1">13</div>
<div id="link2div3" class="section link2">23</div>
<div id="link3div3" class="section link3">33</div>
<div id="link4div3" class="section link4">43</div>
</div>
</div>
The reason only one of those is showing is because when you run toggle visibility youre getting every element with the class section then toggling them all off except for the ONE that is called into the function. So when your onclick is done running youve turned on the first two then turned them off when you call the last one.
A simple fix would be to give each div in the big div a classname determining the link.
<div id=“div3”>
<div id=“link1div3” class=“section link1”></div>
<div id=“link2div3” class=“section link2”></div>
<div id=“link3div3” class=“section link3”></div>
<div id=“link4div3” class=“section link4”></div>
</div>
Do the same for the other divs. Then your links be like this ....
<a href=“#” onclick=“togglevisibility(‘link1’);>Link 1 </a>
Change your javascript to.
<script type="text/javascript">
function toggleVisibility(selectedClass) {
var turnOn = document.getElementsByClassName('selectedClass');
var allDivs = document.getElementsByClassName('section');
for(var i=0; i<section.length; i++) { //this for loop hides all the divs
section[i].style.display = 'none';
}
for(var i=0; i<turnOn.length; i++) { // this for loop shows the divs
turnOn[i].style.display = 'block'; // with the link1 class
}
}
</script>
This solution if it works (I havent been able to test) will also keep something on the page at all times which I saw you mentioned in bold in your post.
<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();
});