Show/hide div on button click - javascript

I am trying to show and hide content depending on which button is pressed. The next button should show content 2 and hide content 1, and previous button should do the opposite.
<script type="text/javascript">
$('a.button-next').click(function() {
$("#tab-content2").addClass("show");
});
</script>
CSS:
#tab-content2 {
display: none;
}
#tab-content2.show {
display: none;
}
HTML:
<div id="tab-content1">
<?php the_content(); ?>
</div>
<div id="tab-content2">
<?php the_field("experience");?>
</div>
Previous
next

Try toggleClass and don't forgot to use document.ready():
$(document).ready(function() {
$('a.button-next').click(function() {
$("#tab-content2").toggleClass("show");
});
});
#tab-content2.show {display:block;}

Use a generic class for all content
<div class="content" id="tab-content1">
<?php the_content(); ?>
</div>
<div class="content" id="tab-content2">
<?php the_field("experience");?>
</div>
Previous
next
So the css would be
.content {
display: none;
}
And the Javascript
$('a.button-next').click(function() {
$('.content').hide(); // To hide all other contents
$("#tab-content2").show(); // Show the one content you want to display
});

The display property of show is none.
Change it to block.
Also, you can just use the .show() or .hide() function instead of using classes.

Try this...
$('a.button-next').on('click', function() {
$("#tab-content2").toggle("show");
});

HTML
<div id="tab-content-holder">
<div id="tab-content1 show">
<?php the_content(); ?>
</div>
<div id="tab-content2">
<?php the_field("experience");?>
</div>
</div>
Previous
Next
JS
$(document).ready(function() {
$(".button-back").click(function() {
MenuNavigationClick(-1);
});
$(".button-next").click(function() {
MenuNavigationClick(1);
});
function MenuNavigationClick(direction) {
// Get current element index and toggle
var current = $("#tab-content-holder .show");
var index = current.index();
current.toggleClass("show");
// Move to next element and check for overflow
index += 1 * direction;
index %= $("#tab-content-holder div").length;
// Toggle next element
$("#tab-content-holder div:eq("+index+")").toggleClass("show");
}
});
CSS
#tab-content-holder div {
display: none;
}
#tab-content-holder div.show {
display: block;
}

Have you tried transferring the show class on another line?
.show
{
display: block;
}

Related

How do I detect hover to elements inside of each() in jQuery?

Thanks for taking a look at my question.
I'm trying to be able to hover over portfolio items but I need to loop through them using each() because I need some way of identifying each item.
I'm trying to hover over .recent-work-item to show .recent-work-item__overlay the .show-none class does display:none;
Neither the hover nor the on.("mouseenter", function(){}) is working.
Here is the HMTL:
<section class="recent-work-item" data-portfolio-id="rwi-<?php echo $i;?>">
<div class="recent-work-item__overlay show-none">
<h3 class="color-white bolder-font"><?php the_title(); ?></h3>
VIEW CASE
</div>
<div class="recent-work-img">
<img src="<?php echo get_template_directory_uri();?>/assets/img/work1.jpg" class="portrait">
</div>
Here is the jQuery:
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
console.log(thisid);
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(thisid).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(thisid).find('.recent-work-item__overlay').addClass('show-none');
});
});
This is not working, I can't get the hover to work and all I want to do is add or remove a class, can I not do this in each().
I've researched thoroughly in StackOverflow but can't find an answer. I would REALLY appreciate any help I can get on this.
I have test your code in my codepen, and the problem you should use $(this) than use $(thisid)
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(this).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(this).find('.recent-work-item__overlay').addClass('show-none');
});
});
Here look at my codepen
Here I have added an example that shows how you could use CSS to show/hide elements. It might not give you exact answer to your problem, but it will help you change your stylesheets as per your requirement.
Essentially, as per the discussion in comments, I don't think you need javascript to design the page the way you need it.
.container {
padding: 10px;
border: 1px solid gray;
}
.container > .hideOnHover {
display: block;
}
.container > .showOnHover {
display: none;
}
.container:hover > .hideOnHover {
display: none;
}
.container:hover > .showOnHover {
display: block;
}
<div class="container">
<div class="hideOnHover">
This text will be hidden on hover.
</div>
<div class="showOnHover">
This text will be shown on hover.
</div>
</div>

jQuery save toggleClass in cookie or localStorage

I am trying to save a cookie or use localStorage (whichever is better) to remember when a visitor has clicked on a plus button to show/hide a div. Can anyone assist in helping make the below code work with a cookie or localStorage?
$('.plus').on('click', function(e) {
$(".plus .icon .two").toggleClass('horizontal');
$(".welcome-section").toggleClass('open');
$(".welcome-header p").toggleClass('explore');
});
I prefer using localStorage:
Javascript:
var $content = $('.js-content');
if (localStorage.getItem('isVisible') === 'true') {
$content.addClass('content_visible');
}
$('.js-button').on('click', function() {
$content.toggleClass('content_visible');
localStorage.setItem('isVisible', $content.hasClass('content_visible'));
});
CSS:
.content {
display: none;
}
.content_visible {
display: block;
}
HTML:
<button type="button" class="js-button">+</button>
<div class="content js-content">This is content</div>
JSFiddle

how toggle all div tags

how? when click the .button, hide all .body div tags and show just closest .body tag div
my codes first one works, but when click the .button, show .body, but when click again, does't toggle ( show / hide ) that, any more?
How to do it properly?
Edit : how to change .button > span icon? ( positive or negative )
Edit : jQuery(this).find('positive').toggleClass('negative'); ?
Edit (saitho): JSFiddle: https://jsfiddle.net/nL4sxbj0/2/
HTML
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="positive"></span>
</a>
</div>
<div class="body">
</div>
</div>
CSS
.body {
display:none;
}
.button .positive,
.button .negative {
width:36px;
height:36px;
float:right;
display:block;
cursor:pointer;
}
.button .positive {
background:url('../img/icon-del.png') no-repeat center center / 18px;
}
.button .negative {
background:url('../img/icon-opn.png') no-repeat center center / 18px;
}
JQUERY
jQuery('.button').on('click' ,function(e) {
e.preventDefault(); // Is this necessary? for
jQuery('.body').hide(); // Problem is hear i think
jQuery(this).closest('.box').find('.body').toggle();
});
Picture
add class iconbtn to button span
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="iconbtn positive"></span>
</a>
</div>
<div class="body">
</div>
jQuery('.button').on('click' ,function(e) {
e.preventDefault();
var box = jQuery(this).closest('.box');
var closestBody = box.find('.body');
jQuery('.body').not(closestBody).hide(); // Hide all except above div
jQuery(closestBody).toggle(); // if visible hide it else show it
jQuery('.iconbtn').removeClass('negative').addClass('positive');
var iconBtn = box.find('.iconbtn');
if (jQuery(closestBody).is(':visible')) {
iconBtn.removeClass('positive').addClass('negative');
} else {
iconBtn.removeClass('negative').addClass('positive');
}
});
jsFiddle Link
The issue is that you have:
jQuery('.body').hide();
in your click callback, that means the body div is first being hidden and then toggle works as it should - it shows the div. There is no way it can hide it though, as before toggle you always first hide the div
Remove this line and it should work, check it here: JS Fiddle

Add and Remove a css image class on toggle using jquery

I am trying to toggle the menu when the user clicks the artcile's h3 element, much like an accordion but a little different.
What I am unable to achieve is that the image does not display nor does it change when the element's slideToggle function is called. However, the slideToggle is working fine, it is just the image I need assistance with.
HTML:-
<div class="pages">
<article class="collapsible expanded collapsed">
<h3><?php echo $lang->xlate('presentation-b');?></h3>
</article>
<div class="content">
<ul>
<li>
<?php echo $lang->xlate('presentation-c');?> </li>
<li>
<?php echo $lang->xlate('presentation-d');?> </li>
<li>
<?php echo $lang->xlate('presentation-e');?> </li>
</ul>
</div>
</div>
CSS
#paragraph .pages .collapsible {
padding: 2px;
cursor: pointer;
font-weight: bold;
}
#paragraph .pages .collapsible .expanded {background: url('../img/list.png') no-repeat left top;}
#paragraph .pages .collapsible .collapsed {background: url('../img/pagination.gif') no-repeat left top;}
jQuery:-
$('.collapsible').click(function(){
$coll = $(this);
$content = $coll.next();
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
if($(this).hasClass('expanded'))
{
$(this).toggleClass('collapsed expanded');
}
else
{
$(this).toggleClass('expanded collapsed');
}
});
});
you dont need the class indicator "." when adding or removing classes. This means that you are not toggling the background image for each state.
$(this).addClass('.collapsed').removeClass('.expanded');
so your code should be
if ($(this).hasClass('.expanded')) {
$(this).addClass('collapsed').removeClass('expanded');
} else {
$(this).addClass('expanded').removeClass('collapsed');
}
Remove . before class name on adding and removing classes.
$(this).addClass('expanded').removeClass('collapsed');
Also you can use toggleClass() to toggle between classes.
$(this).toggleClass('collapsed expanded');
like :
$('.collapsible').click(function() {
$coll = $(this);
$content = $coll.next();
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$(this).toggleClass('collapsed expanded');
});
});

Show and Hide using jquery

There are number of examples for add and remove in jquery.
But my code is bit different to examples. when i click add it show second and if i click again on add i want show third as well as when i click remove hide the third also until five. Here is my code
CSS
#second {
display: none;
}
#third {
display: none;
}
#forth {
display: none;
}
#fifth {
display: none;
}
HTML
<div id="header">
add - remove
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
<div id="forth">forth</div>
<div id="fifth">fifth</div>
</div>`
JavaScript
$(document).ready(
function() {
$("#add1").click(function() {
$("#second").show();
});
$("#remove").click(function() {
$("#second").hide();
});
});
HERE IS CODE
JSfiddle
Here is an approach you can use. First, add a class to all elements that you want to show / hide. In this case I used class toggle:
<div id="header">
add - remove
<div id="first" class="toggle">first</div>
<div id="second" class="toggle">second</div>
<div id="third" class="toggle">third</div>
<div id="forth" class="toggle">forth</div>
<div id="fifth" class="toggle">fifth</div>
</div>
Then when you are adding an element, use function first to find first not visible element with class toggle and show it. When you want to remove element, use function last to find last not visible element and hide it:
$(document).ready(function() {
// when add is clicked, show first not visible element with class 'toggle'
$("#add1").click(function() {
$('.toggle:not(:visible)').first().show();
});
// when remove is clicked, hide last visible element with class 'toggle'
$("#remove").click(function() {
$('.toggle:visible').last().hide();
});
});
Here is updated JSFiddle

Categories