Showing and hiding text in response to a button click - javascript

The code below does this. When I click the button for the first time, it shows the respective text. And when I click the same button again, it fades out and fades in. However, I want the respective text to disappear if the button is clicked the second time instead of fading out and then fading in.
$(document).ready(function(){
$('.info').click(function(){
$(this).next().fadeOut("slow");
$(this).next().fadeIn("slow");
});
});
HTML:
<div>
<a class="info" p style="font-size:30px" href="javascript:void(0);">header 1</a>
<h1 class="infoText" style="display:none">text 1</h1>
</div>
<div>
<a class="info" href="javascript:void(0);">header 2</a>
<h1 class="infoText" style="display:none">text 2</h1>
</div>
<div>
<a class="info" href="javascript:void(0);">header 3</a>
<h1 class="infoText" style="display:none">text 3</h1>
</div>
It should start like this:
header1
header2
header3
When I click header1, it should be like this:
header1
text1
header2
header3
And when I click header 1 again, it should be like this:
header1
header2
header3
Anybody know how to do this?

You can use fadeToggle() to toggle the display with fade effect
$(document).ready(function() {
$('.info').click(function() {
$(this).next().fadeToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<a class="info" p style="font-size:30px" href="javascript:void(0);">header 1</a>
<h1 class="infoText" style="display:none">text 1</h1>
</div>
<div>
<a class="info" href="javascript:void(0);">header 2</a>
<h1 class="infoText" style="display:none">text 2</h1>
</div>
<div>
<a class="info" href="javascript:void(0);">header 3</a>
<h1 class="infoText" style="display:none">text 3</h1>
</div>

You can use toggle() for this purpose. It will hide the element if it is already shown, otherwise it will shows the element.
$('.info').click(function(){
$(this).next().toggle("slow");
});

You can use toggle() Function:
$(document).ready(function() {
$('.info').click(function() {
$(this).next().fadeToggle("slow");
});
});
DEMO

$('.info').click(function(){
//$(this).next().fadeOut("slow");
$(this).next().toggle("slow");
});
Use toggle to hide and show something
AS per suggestion of #Tushar
$('.info').click(function(){
//$(this).next().fadeOut("slow");
$(this).next().fadeToggle("slow");
});

You Try this code
$(document).ready(function() {
$('.info').click(function() {
var _self = $(this);
if(_self.hasClass("active")) {
_self.next().fadeOut("slow");
_self.removeClass("active");
} else {
_self.next().fadeIn("slow");
_self.addClass("active");
}
});
});
Working Demo

Related

How to show a specific div when a link is clicked and hide others?

I want to show only one div when the user clicks the links on the icon bar and hide others. When the user clicks home link of the icon bar only 'hoediv'is visible and others hidden.
My work is below please help!!
<!doctype HTML>
<head>
<div class="main-header-div">
<a id="home" href="" > Home</a>
<a id="about" href=""> About us</a>
</div>
</head>
<body>
<script>
$(function(){
$("#home").click(function(){
$("#homediv").show();
$("#aboutus").hide();
return false;
});
});
</script>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
</body>
</html>
What you need to fix?
Firstly, <head></head> only includes metadata, the rest should be in the <body></body>.
If you're not going to make use <a> anchor tags for hyperlinking, then pass the value href="JavaScript:Void(0);" (The void operator evaluates the given expression and then returns undefined) or better yet, don't use anchor tags better yet span or button.
You didn't import jquery.js in your html file.
You can make this a lot more effecient, but I'd suggest you learn some basic html from the widely available sources and then CSS, Jquery,etc.
Sources to refer:
https://www.w3schools.com/html/html5_intro.asp
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/jquery/default.asp
$(function() {
$("#home").click(function() {
$("#homediv").show();
$("#aboutus").hide();
});
$("#about").click(function() {
$("#homediv").hide();
$("#aboutus").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a id="home" href="JavaScript:Void(0);"> Home</a>
<a id="about" href="JavaScript:Void(0);"> About us</a>
</div>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
If you want to simplify it, you can use classes and data attributes to toggle wanted content:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a class="header-link" id="home" data-toggle="homediv" href="#" > Home</a>
<a class="header-link" id="about" data-toggle="aboutus" href="#"> About us</a>
</div>
<div class="content" id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">
This is my site.
</div>
<div class="content" id="aboutus" style="display:none;">
this is about us page
</div>
<script>
$(document).ready(function() {
$(".header-link").click(function(){
$(".content").hide();
$("#" + $(this).attr("data-toggle")).show();
});
});
</script>

Javascript hide/show div

I have a javascript hide/show div with 4 different divs going. It is working partially but not performing the way I would like. When I click one of the divs it opens up the hidden div, which is perfect, but when I click the other link to open up the other div I want the other one I clicked first to close and then the new one to open. Here is my javascript.
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggle('hide');
});
<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show' data-value="content1"><div class="witb">
<hr class="dark2">
<p></p>Whats in the Bag <i class="fa fa-angle-down" style="font-size:24px"></i></p>
</div>
</div></a>
<div id='content2' style="display:none">
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
</div>
// Hopefully you have some selector reference to target them all
var $all = $(".drops"); // Clearly I used .drops for example
$('[data-value]').on('click', function(event) {
var $target = $('#'+ this.dataset.value);
$all.not( $target ).hide(); // Hide all but target one
$target.toggle(); // Toggle target one
});
Here's an improved example:
var $all = $(".togglable");
$('[data-toggle]').on('click', function(event) {
var $target = $(this.dataset.toggle);
$all.not( $target ).hide(); // Hide all but target one
$target.toggle(); // Toggle target one
});
[data-toggle]{cursor:pointer; display:inline-block; color:#0bf; padding:0 8px;}
.hidden{display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="#el1">TOGGLE1</a>
<a data-toggle="#el2">TOGGLE2</a>
<a data-toggle="#el3">TOGGLE3</a>
<div id="el1" class="togglable hidden">ELEMENT1</div>
<div id="el2" class="togglable hidden">ELEMENT2</div>
<div id="el3" class="togglable hidden">ELEMENT3</div>
Please try this
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggleClass('hide');
});
It will be better if you could give your divs a common class instead of ids so you could hide other divs using this common class like :
$('.common_class').addClass('hide');
If you cant you could loop through all the divs and hide them before showing the current clicked one :
$('[id^="hideshow"]').on('click', function(event) {
$('[id^="hideshow"]').each(function(){
$('#'+$(this).data('value')).addClass('hide');
});
dataValue_id = $('#'+$(this).data('value'));
$(dataValue_id).toggleClass('hide');
});
Hope this helps.
Snippet using common classes :
$('.common_class').on('click', function(event) {
$('.common_class_2').not($('.common_class_2', this)).addClass('hide');
$('.common_class_2', this).toggleClass('hide');
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='common_class'>DIV 1
<p class='common_class_2'>Content 1</p>
</div>
<div class='common_class'>DIV 2
<p class='common_class_2 hide'>Content 2</p>
</div>
<div class='common_class'>DIV 3
<p class='common_class_2 hide'>Content 3</p>
</div>
<div class='common_class'>DIV 4
<p class='common_class_2 hide'>Content 4</p>
</div>

Accordion div. Open a specific link from another page

The following is in TestPage1.html
<p class ="User">
<a name="H1"></a>HEADING1</p>
<div class="description" style="display:none">
--CONTENT OF THE PANEL---
</div>
<p class ="User">
<a name="H2"></a>HEADING2 </p>
<div class="description" style="display:none">
--CONTENT OF THE PANEL---
</div>
When the user clicks on Heading1 or Heading2, the content collapses/expands.
The following content is in another page (Testpage2.html). So when I click on the link, it is supposed to open the content in HEADING1.
LINK
Here is the JQUERY:
$(document).ready(function() {
$(".description").hide();
$(".User").click(function() {
$(this).next(".description").slideToggle(500); });
$(".User").click(function(event){
window.location.hash=this.hash;
});
});
</script>
Any help is appreciated.

Using either jQuery or plain JavaScript to fadeIn and fadeOut

This is the first time I've ever using stackoverflow, so here I go.
I'm creating a website and currently, I have created buttons for the navigation. By default (the homepage) shows a slideshow using JavaScript and this is all contained within a div.
When I click, let's say the 'About Me' page, I want that div to fade out and another div to fade in which will contain an image and text.
Here's my code:
<body>
<div id="top_wrapper">
<a class="button navigation" id="homeBtn">Home</a>
<a class="button navigation" id="aboutBtn">About Me</a>
<a class="button navigation" id="coachBtn">Peronsal, Business and Professional Coaching</a>
<a class="button navigation" id="successBtn">Success Stories</a>
<a class="button navigation" id="workBtn">Community Work</a>
<a class="button navigation" id="charityBtn">Charity</a>
<a class="button navigation" id="contactBtn">Contact Me</a>
</div>
<div id="home">
<div id="sliderFrame">
<div id="slider">
<img src="_images/_image01.jpg" />
<img src="_images/_image02.jpg" />
<img src="_images/_image03.jpg" />
<img src="_images/_image04.jpg" />
<img src="_images/_image05.jpg" />
</div>
</div>
<div id="border">
<img src="_images/_border.png" />
</div>
</div>
<div id="aboutme">
<div id="text">
<p>This is the text</p>
</div>
</div>
</body>
In my example, I want that when the user clicks on the 'About Me' button, the div 'home' fades out and the div 'aboutme' fades in.
I've tried nearly all of the examples on stackoverflow as well as whatever the jQuery/JavaScript websites and Google could throw at me and no luck.
One way could be to do it like so:
$('#aboutBtn').click(function(){
$('#home').fadeOut(300);
$('#aboutme').delay(400).fadeIn(300);
});
Edit: the solution above was more of a quick fix for an individual case, the solution below is the kind of thing you should do instead, especially when you have multiple anchors/divs.
Here's a working jsFiddle example.
HTML:
<a class="buttonNav" target="1">Home</a>
<a class="buttonNav" target="2">About</a>
<a class="buttonNav" target="3">Success</a>
<div id="div1" class="targetDiv">Home Div</div>
<div id="div2" class="targetDiv">About Div</div>
<div id="div3" class="targetDiv">Success Div</div>
CSS:
.targetDiv {
display:none;
color:red;
}
.targetDiv:nth-of-type(1) {
display:block;
}
jQuery:
$(function(){
$('.buttonNav').click(function(){
$('.targetDiv').fadeOut();
$('#div'+ $(this).prop('target')).delay(400).fadeIn();
});
});
This approach would be much cleaner for scaling usage of options, like in your case.
You can fadeout the home div and in callback of this fadeout you can fadein the about me div. Somthing like this:
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').fadeIn('slow');
});
});
Here is the FIDDLE
Here is an improved example: jsfiddle
This example will allow you using the same div as a container for all links...
Note that you should add a href for your link tags.
Have fun.
jquery:
$('#aboutme').hide();
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('about me text!!!').fadeIn('slow', function(){ });
});
});
$('#homeBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('home text button text!!!').fadeIn('slow', function(){ });
});
});
//add other click events for each link.
EDIT: Tune up - and save time
See this jsfiddle
Now you should set only an array key as the same id of the relevant link and type in his text!
have fun

jquery toggle between divs and subsequently hide active div

a play on a similar question asked by me that was graciously answered.
three divs, all hidden. jquery toggles between them via different links. this works great! now, i'd like to clink the link corresponding to the active div and hide it, esentially the same as when the page loads with all of them hidden. right now it fades out and back in.
help! thank you!
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<div id="content">
<div class="current" id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
</div>
Javascript:
$(function(){
$('#about').css('display', 'none');
$('#subscribe').css('display', 'none');
$('#contact').css('display', 'none');
});
$('.home').click(function(){
var id = $(this).html().toLowerCase();
$('.current').fadeOut(600, function(){
$('#'+id).fadeIn(600);
$('.current').removeClass('current');
$('#'+id).addClass('current');
});
});
Try this out..
Since on fadeOut the current class is removed, if the size of current is 0 it means nothing is selected. We can simply fadeIn the content div.
$('#about, #subscribe, #contact').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
var $content = $('#' + id + ':not(:visible)');
if ($('.current').length === 0) {
showContent($content)
}
else {
$('.current').fadeOut(600, function(){showContent($content)});
}
});
function showContent(content) {
content.fadeIn(600);
$('.current').removeClass('current');
content.addClass('current');
}
Example on jsfiddle.
Here is another approach:
$(function(){
$('#content div').hide();
});
$('.home').click(function(){
var targetSelector = '#' + $(this).attr('title').toLowerCase();
var targetShown = $(targetSelector).is(':visible');
if (targetShown) {
$(targetSelector).fadeOut(600);
} else {
$('#content div:not(' + targetSelector + ')').fadeOut(600,
function() {$(targetSelector).fadeIn(600)});
}
});
Check to see if the id of the clicked element is equal to the id of the element currently being displayed (i.e. the element with the current class). If it is a different element, then a swap needs to take place. If it is the same element, then it needs to be hidden and have its current class removed...
(Edit: fixed code)
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<br />
<br />
<br />
<div id="content">
<div id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
<div class="current" id="dummy"></div>
</div>
JS:
$().ready(function()
{
$('#about').hide();
$('#subscribe').hide();
$('#contact').hide();
$('#dummy').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
if ($('.current').length >0) {
if($('.current')[0].id.toLowerCase() != id)
{
$('.current').hide();
$('.current').removeClass('current');
$('#'+id).addClass('current');
$('#'+id).show();
}
else
{
$('.current').hide();
$('.current').removeClass('current');
$('#dummy').addClass('current');
}
}
});
});
Just replace the .hide()'s and .shows()'s with fades in and out.

Categories