link click works only once - javascript

i have hidden div that contain a div inside it and this div is hidden by default , and i have link should bring the content of (#mobiles_thumbs) div , every thing work perfectly just for first click on the link and the second click the div that change its content disappear i used (on) delegate . this is my code :
//and here my jquery code for handle the link click :
$('#products').on('click', 'a', function() {
$("#thumbs").html($("#thumbs_collection #mobiles_thumbs"));
/* here #thumbs_collection is the name of big div that contain six
div inside it.
*/
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this is the hidden div -->
<div id="thumbs_collection">
<div id="mobiles_thumbs" style="visibility:hidden">
<img alt="mobile1" src="images/mobile1.jpg">
<img alt="mobile2" src="images/mobile2.jpg">
</div>
</div>
<div id="products" class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Our Products </h1>
</div>
<div class="col-sm-12">
<ul>
<li> Mobiles </li>
<li> Swatches </li>
<li> Chairs </li>
<li> Boxs </li>
<li> Doors </li>
<li> Windows </li>
</ul>
</div>
<div id="thumbs">
<!--this div for load the products -->
</div>
</div>
</div>

Try cloning the element fist and don't forget to toggle visibility after the html append
var temp = $("#thumbs_collection #mobiles_thumbs").clone();
$('#products').on('click', 'a', function() {
$("#thumbs").html(temp);
});

Related

How to automatically open show / hide javascript tab and re-hide on second click

I have some tabs which show hidden information when clicked. But as they are now, they will open but only close when a new tab is clicked. If possible could I get help with these two issues:
1- I want to make the tab close again when you click it a second time.
2- I have links set up to open the page where each section starts. Is there anyway I can make the tab open automatically when that link is clicked?
I appreciate the help.
Edited to show the full code I have now:
$('.drop a').click(function() {
var $content = $(this).parent().next().toggle();
//HIDE THIS LINE IF YOU DO NOT WANT TO HIDE OTHER TABS ON CLICK
$('.droptab').not($content).hide();
});
.droptab {
display: none
}
<div class="child-page">
<a class="anchor" id="<?php echo $child->post_title; ?>"></a>
<h2 class="child-title drop"><a><?php echo $child->post_title; ?><span class="down-arrow"><img src="down-arrow.png" /></span></a></h2>
<div class="droptab">
<div class="description"><?php echo apply_filters('the_content', $child->post_content); ?></div>
<aside class="sidebar">
<div class="info">
<div class="more-but">
<span class="caption">Get More Info</span>
</div>
</div>
</aside>
<div style="clear: both;"></div>
</div><!-- .droptab -->
</div>
Use toggle instead of hide show.
The toggle() method toggles between hide() and show() for the selected elements.
Hide this line "$('.droptab').not($content).hide();" IF YOU DO NOT WANT TO HIDE OTHER TABS ON CLICK
$('.drop a').click(function() {
var $content = $(this).parent().next().toggle();
//HIDE THIS LINE IF YOU DO NOT WANT TO HIDE OTHER TABS ON CLICK
$('.droptab').not($content).hide();
});
//ADD THIS LINE IF YOU WANT TO OPEN FIRST TAB BY DEFAULT ON PAGE LOAD
$('.droptab').first().toggle();
.droptab {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowntabs">
<a class="anchor" id="main-tab"></a>
<h2 class="drop">
<a>MAIN TITLE</a>
</h2>
<div class="droptab">
<p>MAIN TITLE CONTENT</p>
</div>
<a class="anchor" id="second-tab"></a>
<h2 class="drop">
<a>SECOND TITLE</a>
</h2>
<div class="droptab">
<p>SECOND TITLE CONTENT</p>
</div>
</div>
You can use toogle instead for the current link and hide the others:
$('.drop a').click(function() {
var content = $(this).parent().next();
$('.droptab').not(content).hide(200);
$(content).toggle(200);
});
Working snippet
$('.drop a').click(function() {
var content = $(this).parent().next();
$('.droptab').not(content).hide(200);
$(content).toggle(200);
});
.droptab {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowntabs">
<a class="anchor" id="main-tab"></a>
<h2 class="drop">
<a>MAIN TITLE</a>
</h2>
<div class="droptab">
<p>MAIN TITLE CONTENT</p>
</div>
<a class="anchor" id="second-tab"></a>
<h2 class="drop">
<a>SECOND TITLE</a>
</h2>
<div class="droptab">
<p>SECOND TITLE CONTENT</p>
</div>
</div>

jQuery: How to create a menu and a submenu where the classes toggle on each click

I have this JS fiddle:
https://jsfiddle.net/zczwjdrw/7/
Menu 1:
When clicking on AAA it opens a menu.
When clicking on BBB it opens an other menu and removes AAAs style back to default. When clicking on BBB again it closes the submenu but doesn't change back to default. How do I solve this?
Menu 2:
When clicking on a sub menu option - it colors it. when clicking on an other option - it doesn't remove the class from the previous element. and you can continue coloring all submenu options. What can be the solution for this? I have used the same functionality on jQuery as .sidebar1.
jQuery:
$('.sidebar1 a').click(function(){
$(this).addClass('active-sb1').siblings().removeClass('active-sb1');
});
$('.sidebar2 a').click(function(){
$(this).addClass('active-sb2').siblings().removeClass('active-sb2');
});
HTML:
<div class="main-wrapper">
<div class="sidebar1">
<a href="ssb1" class="category" id="sb1" onclick="return false">
<div>AAA</div>
</a>
<a href="ssb2" class="category" id="sb2" onclick="return false">
<div>BBB</div>
</a>
<a href="ssb3" class="category" id="sb3" onclick="return false">
<div>CCC</div>
</a>
</div>
<div class="sidebar2" id="ssb1" style="display: none;">
<div class="sb2-content">
<h3>Choose Something:</h3>
</div>
<div class="sb2-menu">
<ul>
<li>
AAAAAAAAAAAAA
</li>
<li>
AAAAAAAAAAA
</li>
<li>
AAAAAAAAAAA
</li>
</ul>
</div>
</div>
<div class="sidebar2" id="ssb2" style="display: none;">
<div class="sb2-content">
<h3>Choose Something:</h3>
</div>
<div class="sb2-menu">
<ul>
<li>
BBBBBBBBBB
</li>
<li>
BBBBBBBBBB
</li>
<li>
BBBBBBBBBB
</li>
</ul>
</div>
</div>
<div class="sidebar2" id="ssb3" style="display: none;">
<div class="sb2-content">
<h3>Choose Something:</h3>
</div>
<div class="sb2-menu">
<ul>
<li>
CCCCCCCCC
</li>
<li>
CCCCCCCC
</li>
<li>
CCCCCCCC
</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="user-bar">
</div>
<div class="content">
</div>
</div>
</div>
In .sidebar2 your <a> elements are inside a <li> so the <a> has no other siblings. But instead the parent <li> has siblings.
So, you could try something like this:
$('.sidebar2 a').click(function() {
var e = $(this);
e.addClass('active-sb2');
e.parent().siblings().children().removeClass('active-sb2');
});
And for your first problem, you could test if the element already has the class active-sb1, which means that the element is open, in which case you remove the class.
$('.sidebar1 > a').click(function() {
var e = $(this);
if (e.hasClass("active-sb1")) {
e.removeClass('active-sb1');
} else {
e.addClass('active-sb1');
}
e.siblings().removeClass('active-sb1');
});
Updated Fiddle link

Hide/Show div not working

Note questions that have already been posted does not solves my problem. The above are the displays from my side menu bar, I want when the user click on a link its content are displayed on the same page and the other div content are hidden. I tried the codes below but they seem not working.
$('a.common').click(function() {
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
The problem was that you had $('a.button') instead of $('a.common')
You also want a css to hide the divs at the beginning.
And also when you fade in a new div, you need to hide the current one.
$('a.common').click(function() {
var id = $(this).attr('href');
$("#divs div").hide();
$(id).fadeIn('slow', function() {
// Animation complete
});
});
#divs div {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="divs">
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
</div>
The problem is in your jQuery selector:
//This ona means that you are searching for tag a with class button
$('a.abutton').click(function() {})
//You should use:
$('a.common').click(function() {})
// Because your a tags has class 'common'
There was 2 problem
Your <div> tag is not closed properly in your <li>
Initially you are not hiding your div so it can be fade in once you click on it.
Here is the fiddle for your code https://jsfiddle.net/2tkfq87o/
First thing is that your html had an error. On <div> element was not added. Secondly you never called hide() on all the divs at the start because of which none of them were hidden. You had only fadeIn. If all divs are visible, it makes no sense to call fadeIn.
So hide them first. Then call fadeIn on click and at the same time hide the div present already.
$(document).ready(function() {
$('a.common').click(function() {
hideAllDivs();
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
var hideAllDivs = function() {
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
}
hideAllDivs();
$('#div1').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>

Foundation + Flexslider with Thumbnails not working

I'm trying to build a gallery page use Flexslider in a site built with Foundation. If I build the Flexslider on its own, it works fine, but when I incorporate it into a page with Foundation it stops working. I can only get any of the images to load by adding in some extra CSS to force the initial image to load, but the thumbnails do not control which slide is shown (nor do they even show as a clickable element) and none of the navigation controls appear. Everything related to both Foundation and Flexslider has been copied from a working example to avoid typing errors.
As a work around, I did the following...
I created thumbs with the code below:
<div class="flexslider-controls">
<ol class="new-nav">
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-2.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-3.jpg" />
</div>
</div>
</div>
</li>
</ol>
</div>
Then using some jquery, as you click on each thumb, it will change the slider to the corresponding slide:
$(document).ready(function () {
$(document).on('click','.new-nav li a',function(){
var index = $('.new-nav li a').index(this) + 1;
$('.videos-slider').flexslider(index);
return false;
});
});

Menu with Collapse BootStrap

Hello I have a button in BootStrap. I use "collapse" in a menu and each of those buttons when I push this to collapse this appear with any problem.
But when I push another button with this active appear down on the other.
How change this action? When I push any button this hide this but with the same animation like collapse do it.
Here is the code, when you try it you'll understand me:
<ul class="nav nav-pills">
<li class="dropdown">1<strong class="caret"></strong></li>
<li class="dropdown">2<strong class="caret"></strong></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...1 </li></ul>
</div>
</div>
</div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...2 </li></ul>
</div>
</div>
</div>
</div>
</div>
Try this.
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).height(0);
$('.in').not($(this).data('target')).removeClass('in');
});
});
</script>
You can also try this. (which gives more of a collapse animation)
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).collapse('hide');
});
});
</script>
You can add it to the bottom of your page right before the </body> tag or add it to your existing javascript file.
Try that and let me know if it's close to what you want.

Categories