How can I toggle texts and icons using jQuery?

How can I toggle texts and icons using jQuery? - javascript

I have an accordion.
When I click on show details :
the accordion content will expand,
the text will change from show details to hide details
the icon will change from + to x
click on it again should toggle back to its original state.
I couldn't get it to work. When I click on it, it stuck on the HIDE DETAILS state forever.
JS
$(".show-details-sk-p").click(function () {
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
});
Can someone please give me a little push here ?
I've put together a Fiddle - just in case it is needed.

Inspected the aciton and element behavior, find that #sk-p-r will have class in to decide whether its collapsed or not.
$(".show-details-sk-p").click(function () {
var isCollapse = $('#sk-p-r').hasClass('in');
var text = isCollapse ? 'SHOW DETAILS' : 'HIDE DETAILS';
var img = isCollapse ? 'http://s6.postimg.org/e9eydpbct/plus.png' : 'http://s6.postimg.org/bglqtob0d/remove.png'
$(".show-details-txt-sk-p-r").text(text);
$(".icon-sk-p-r-toggle").attr("src", img);
});

There's a lot of ways you can do this but your problem is that your 'click' doesn't have any way to set the 'show details' state from the code you have there.
In a really simple solution for this:
$(".show-details-sk-p").click(function () {
$(this).toggleClass('open')
if($(this).hasClass('open') === true){
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
}else{
$(".show-details-txt-sk-p-r").text("SHOW DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
}
});
This is one way to do it. I'm adding a class to the element here to track state and then conditionally setting the image and text based on that state to give you a true toggle. There are likely smarter and more efficient ways to do this but this should be a simple enough example to point you into the right direction.

I have added a boolean variable which is toggled whenever the accordion is clicked. Check out this fiddle
var show=false; //indicates whether the accordion is hidden
$(".show-details-sk-p").click(function () {
if(!show){
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
show=true;
}
else{
$(".show-details-txt-sk-p-r").text("SHOW DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
show=false;
}
});
I have used the show variable to determine what text to display on the accordion.

You need to revert text and image when collapsing an accordion
/* JavaScript */
$(".show-details-sk-p").click(function() {
if ($(this).data('shown') === true) {
$(this).data('shown', false);
$(".show-details-txt-sk-p-r").text("SHOW DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
} else {
$(this).data('shown', true);
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
}
});
/* CSS */
.sk-p-dash {
padding-left: 25px;
}
.panel {
border-radius: 0px !important;
}
.sk-p {
margin-right: 16px;
margin-left: 16px;
}
.panel-title,
.panel-body {
font-size: 10px;
}
.show-details-txt-sk-p-r {
padding-right: 12px;
}
.show-details-sk-p {
font-size: 9px;
padding-right: 5px;
}
.show-details-sk-p .icon-sk-p-r-toggle {
margin-top: -5px;
}
<!-- HTML -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="row sk-p">
<div class="col-md-12">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
PRE-REQUISITE(S) FOR ALL SKILLS IN EXERCISE
<span data-toggle="collapse" data-parent="#accordion" href="#sk-p-r" class="show-details-sk-p pull-right">
<span class="show-details-txt-sk-p-r">SHOW DETAILS</span>
<img width="20px" class="icon-sk-p-r-toggle" src="http://s6.postimg.org/bglqtob0d/plus.png">
</span>
</h4>
</div>
<div id="sk-p-r" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-lg-6">
<span>SOLVING EQUATIONS BY ADDITION OR SUBSTRACTION </span>
<br>
<br>
<div class="sk-p-dash">
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/m4phsikzh/review_video.png">
<span>WATCH VIDEO</span>
<br>
<br>
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/6yjg1kuyl/review_pdf.png">
<span>REVIEW LESSON</span>
</div>
</div>
<div class="col-lg-6">
<span>GRAPHING INEQUALITIES IN ONE VARIABLE </span>
<br>
<br>
<div class="sk-p-dash">
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/m4phsikzh/review_video.png">
<span>WATCH VIDEO</span>
<br>
<br>
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/6yjg1kuyl/review_pdf.png">
<span>REVIEW LESSON</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Simply toggle
better store the string values in variables
var txtHide = "HIDE DETAILS";
var txtShow = "SHOW DETAILS";
var rmvImage = "http://s6.postimg.org/e9eydpbct/remove.png";
var plsImage = "http://s6.postimg.org/bglqtob0d/plus.png";
$(".show-details-sk-p").click(function () {
$(".show-details-txt-sk-p-r").text($(".show-details-txt-sk-p-r").text()==txtHide ? txtShow :txtHide );
$(".icon-sk-p-r-toggle").attr("src",$(".icon-sk-p-r-toggle").attr("src")==rmvImage ? plsImage :rmvImage );
});
Check http://jsfiddle.net/ZigmaEmpire/bpaxpuhz/2/

Related

How to make it so that previous answer is displayed when number is clicked after equals in js calculator?

I need to make it so that the previous result is displayed when the user presses a num after pressing equals... how do I do it? And just fyi I am just helping my friend make the code for his calculator clean - his was very messy - if you want I can show you his code as well.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='answer'>
<p class='returnAnswer'>Answer Will Come Here</p>
</div>
<div class='buttonDiv'>
<div class='button'>0</div>
<div class='button'>1</div>
<div class='button'>2</div>
<div class='button'>3</div>
<div class='button'>4</div>
<div class='button'>5</div>
<div class='button'>6</div>
<div class='button'>7</div>
<div class='button'>8</div>
<div class='button'>9</div>
<div class='equals'>=</div>
<div class='button'>c</div>
<div class='button'>+</div>
<div class='button'>-</div>
<div class='button'>x</div>
<div class='button'>÷</div>
<div class='button'>.</div>
<div class='button'>%</div>
</div>
</div>
</body>
</html>
<script type="application/javascript" src="/share.js"></script>
<script>
var eq = "";
var ans = eval(eq);
$('.button').click(function() {
eq += $(this).text();
$('.returnAnswer').text(eq);
});
$('.equals').click(function() {
$('.returnAnswer').text(ans);
});
</script>

This was a fun thing to do.... Here is what I have done to your code
Added some styles to the button (not important, but makes it easier to click)
Added a class named num to each number button, that will be used to reset the display if any button is clicked following '=' button.
Removed 'equals' class from '=' button and added it as an ID
Added code to clear the display when 'C' is clicked
Changed buttons 'x' to ' * ' and '÷' to '/' as otherwise eval function will not work
Changed back to 'x' and '÷', and added 2 lines inside equals.clicked to replace these with correct operators
Check the Code snippet
var eq = "";
var ans = eval(eq);
var equalsCliked = false;
$('.button').not("#equals, #cbutton").click(function () {
if ($(this).hasClass('num') && equalsCliked)
eq = "";
eq += $(this).text();
$('.returnAnswer').text(eq);
equalsCliked = false;
});
$('#equals').click(function () {
equalsCliked = true;
eq = eq.split("÷").join("/");
eq = eq.split("x").join("*");
ans = eval(eq);
eq = ans;
$('.returnAnswer').text(ans);
});
$('#cbutton').click(function () {
equalsCliked = false;
eq = "";
ans = eval(eq);
//eq = ans;
$('.returnAnswer').text("");
});
.button {
border: 1px solid gray;
padding: 8px;
margin: 3px 3px;
float: left;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='answer'>
<p class='returnAnswer' style="width:330px; padding: 10px; min-height:20px; border: 1px solid gray; border-radius: 2px;">Answer Will Come Here</p>
</div>
<div class='buttonDiv' style="background-color:yellow; float:left; width: 330px;">
<div class='button num'>0</div>
<div class='button num'>1</div>
<div class='button num'>2</div>
<div class='button num'>3</div>
<div class='button num'>4</div>
<div class='button num'>5</div>
<div class='button num'>6</div>
<div class='button num'>7</div>
<div class='button num'>8</div>
<div class='button num'>9</div>
<div id="equals" class='button'>=</div>
<div id="cbutton" class='button'>C</div>
<div class='button'>+</div>
<div class='button'>-</div>
<div class='button'>x</div>
<div class='button'>÷</div>
<div class='button'>.</div>
<div class='button'>%</div>
</div>
</div>
</body>

Refactoring jQuery repeating pattern

I have painted my self into a corner in order to quickly prototype.
What's the best way to refactor the following jQuery code? Its functionality is to toggle between some sidebar navigation items. I need it to be more dynamic in order to be scalable.
Would you add the IDs inside the if statements, in an array and iterate through them? Use variables? Create a function and call it on the html side onClick? No matter what I think of, it stills leads to a bunch of repeating code.
Thank you!
// TOGGLING LEFT NAVIGATION
$('#settingsClick').click(function() {
if( $('#addContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#settingsContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#settingsContainer').slideToggle(350);
}
});
$('#addClick').click(function() {
if( $('#settingsContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#addContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#addContainer').slideToggle(350);
}
});
$('#noteClick').click(function() {
if( $('#settingsContainer, #addContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#noteContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#noteContainer').slideToggle(350);
}
});
$('#logoClick').click(function() {
if( $('#settingsContainer, #addContainer, #noteContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#logoContainer').slideToggle(350);
}
});
$('#themeClick').click(function() {
if( $('#settingsContainer, #addContainer, #noteContainer, #logoContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#themeContainer').slideDown(350);
} else {
$('#themeContainer').slideToggle(350);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="settingsClick">Click Me</a><br>
<div id="settingsContainer">Content...</div>
<br><br>
<a id="addClick">Click Me</a><br>
<div id="addContainer">Content...</div>
<br><br>
<p> Etc... Etc....</p>

You should group using the common CSS class, i.e. header and content. Using the established relationship you can target the others content holder and content associated with the current clicked header element.
$('.container .header').on('click', function() {
//Get the current element
var $this = $(this);
//find the content
var $content = $this.closest('.container').find('.content'); //$this.next()
//get all contents
var content = $('.container .content');
//Slide up others
content.not($content).slideUp(350);
//Slide down
$content.slideToggle(350);
});
.content {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header" id="settingsClick">Click Me</div>
<div class="content" id="settingsContainer">Content...</div>
</div>
<div class="container">
<div class="header" id="addClick">Click Me</div>
<div class="content" id="addContainer">Content...</div>
</div>
<div class="container">
<div class="header" id="noteClick">Click Me</div>
<div class="content" id="noteContainer">Content...</div>
</div>

the best bet would be to do it like so
$(document).on('click', ".trigger", function() {
var sibling_content = $(this).siblings(".content");
if (!sibling_content.hasClass('active')) {
$(".content").slideUp('slow').removeClass('active');
sibling_content.slideDown('slow').addClass('active');
} else {
sibling_content.slideUp('slow').removeClass('active');
}
})
.trigger {
background-color: red;
color: white;
font-size: 16px;
}
.content {
background-color: blue;
color: white;
font-size: 16px;
padding: 20px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>

Change Icon on click and add a css class through javascript

I'm trying to make a expandable h3. For that I'll have a "plus" image to click and when it's clicked has to change to a "minus" image and I need to add a css class to the h3 to show the content. I'll paste all the code below:
<div class="default">
[ManageBlog]
<div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none">
</div>
<div class="head">
<h1 class="blogname">
[BlogName] <img src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3> [Author]
</div>
<br /> [Posts] [Pager]
</div>
<div style="clear: both"></div>
And here is the javascript:
jQuery(document).ready(function() {
$("#ExpandBlogDescriptionImg").click(function() {
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
element.src = element.bln ? right : left;
element.bln = !element.bln;
});
var img = $("#ExpandBlogDescriptionImg");
if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") {
$('.blogdescription').addClass("ExpandBlogDescriptionText");
} else {
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
};
});

you can use .attr function of jquery to set image source like
$('.img-selector').attr('src','plusorminusimagepath.jpg');
and you can have a boolean flag to know if it is less or more

Here i was changing alt attribute of image tag on click. the same way you can change src
jQuery(document).ready(function() {
$("#ExpandBlogDescriptionImg").click(function() {
if ($(this).attr("alt") == "+") {
$(this).attr("alt", "-");
} else {
$(this).attr("alt", "+");
}
});
var img = $("#ExpandBlogDescriptionImg");
if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") {
$('.blogdescription').addClass("ExpandBlogDescriptionText");
} else {
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="default">
[ManageBlog]
<div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none">
</div>
<div class="head">
<h1 class="blogname">
[BlogName] <img alt="+" src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3> [Author]
</div>
<br />[Posts] [Pager]
</div>
<div style="clear: both"></div>

You should use a sprite image and CSS, else when you click and it will load another image, for some time between image would disappear.
HTML
<div class="head">
<h1 class="blogname">
[BlogName] <span class="plus icon"></span></h1>
[RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3>
[Author]</div>
<br />
CSS
.icon{
width:30px;
height:30px;
display:inline-block;
background-image:url(plus-minus-sprite-image.png);
}
.icon.plus{
background-position:20px center;
}
.icon.minus{
background-position:40px center;
}
JS
$('.icon').click(function(){
$(this).toggleClass("plus minus");
if($(this).hasClass("plus")){
$('.blogdescription').addClass("ExpandBlogDescriptionText");
}else{
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
}
// Or $('.blogdescription').toggleClass("ExpandBlogDescriptionText");
});

$("#ExpandBlogDescriptionImg").click( function(e){
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
if($(e.currentTarget).attr('img') == left){
$(this).hide();
$(e.currentTarget).attr('img',right);
}else{
$(this).show();
$(e.currentTarget).attr('img',left);
}
});

Default .toggle() easing animation in jQuery not working

I am trying to hide sidebars by using toggle() jquery function.
Code:
$('#hide_saved_templates').click(function(){
$('#saved_templates').toggle('slow');
var jobWrapper = $('#job_form_wrapper');
if(jobWrapper.hasClass('col-md-7'))
{
jobWrapper.removeClass('col-md-7');
$('#hide_saved_templates').removeClass('glyphicon-backward');
$('#hide_saved_templates').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-9');
}
else if(jobWrapper.hasClass('col-md-10'))
{
jobWrapper.removeClass('col-md-10');
$('#hide_saved_templates').removeClass('glyphicon-backward');
$('#hide_saved_templates').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-12');
}
else if(jobWrapper.hasClass('col-md-12')){
jobWrapper.removeClass('col-md-12');
$('#hide_saved_templates').removeClass('glyphicon-forward');
$('#hide_saved_templates').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-10');
}
else {
jobWrapper.removeClass('col-md-9');
$('#hide_saved_templates').removeClass('glyphicon-forward');
$('#hide_saved_templates').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-7');
}
});
$('#hide_job_history').click(function(){
$('#jobs_history').toggle('slow');
var jobWrapper = $('#job_form_wrapper');
if(jobWrapper.hasClass('col-md-7'))
{
jobWrapper.removeClass('col-md-7');
$('#hide_job_history').removeClass('glyphicon-forward');
$('#hide_job_history').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-10');
}
else if(jobWrapper.hasClass('col-md-10'))
{
jobWrapper.removeClass('col-md-10');
$('#hide_job_history').removeClass('glyphicon-backward');
$('#hide_job_history').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-7');
}
else if(jobWrapper.hasClass('col-md-9')){
jobWrapper.removeClass('col-md-9');
$('#hide_job_history').removeClass('glyphicon-forward');
$('#hide_job_history').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-12');
}
else if(jobWrapper.hasClass('col-md-12')){
jobWrapper.removeClass('col-md-12');
$('#hide_job_history').removeClass('glyphicon-backward');
$('#hide_job_history').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-9');
}
});
The toggle is working fine and toggling the sidebars as expected. However, the default easing animation of toggle('slow') is working perfectly for one sidebar $('#saved_templates').toggle('slow') and not working for the other $('#jobs_history').toggle('slow'); . I have used the same code for both sidebars but I didn't able to understand the reason for this inconsistency. I want to apply smooth simple transition to the toggle effect.
HTML Structure:
<div class="row">
<div class="col-md-2 no-padding show-templates-outer-wrapper" id="saved_templates" style="display: none;"></div>
<div class="no-padding col-md-12" id="job_form_wrapper">
<span id="hide_saved_templates" class="glyphicon glyphicon-forward" style="cursor: pointer;"></span>
<span id="hide_job_history" style="position: absolute; right: 5px; cursor: pointer;" class="glyphicon glyphicon-forward"></span>
</div>
<div class="col-md-3 no-padding show-jobs-history-outer-wrapper" id="jobs_history" style="display: none;"></div>
</div>

The problem is toggle and changing class occurs same time. Since jobs_history div is in the last position it's toggle event is not affecting others. Following code snippet may help you.
var saved_templates = $('#saved_templates');
var jobs_history = $('#jobs_history');
$('#hide_saved_templates').click(function() {
if (saved_templates.is(':visible')) {
saved_templates.hide('slow', function() {
jobs_history.show();
});
} else {
jobs_history.hide();
saved_templates.show('slow');
}
$(this).toggleClass('glyphicon-backward glyphicon-forward');
});
$('#hide_job_history').click(function() {
if (jobs_history.is(':visible')) {
jobs_history.hide();
saved_templates.show('slow');
} else {
saved_templates.hide('slow', function() {
jobs_history.show();
});
}
$(this).toggleClass('glyphicon-backward glyphicon-forward');
});
#saved_templates, #jobs_history, #job_form_wrapper {
border: 1px solid #000;
height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2 no-padding show-templates-outer-wrapper" id="saved_templates" style="display: none;"></div>
<div class="no-padding col-md-10" id="job_form_wrapper">
<span id="hide_saved_templates" class="glyphicon glyphicon-forward" style="cursor: pointer;"></span>
<span id="hide_job_history" style="position: absolute; right: 5px; cursor: pointer;" class="glyphicon glyphicon-forward"></span>
</div>
<div class="col-md-2 no-padding show-jobs-history-outer-wrapper" id="jobs_history" style="display: none;"></div>
</div>
See the result in full page.

Hiding div on button click

I have a script which has three buttons which shows a div when clicked, now my question is how do I hide those div's so let's say div 1 is opened and I click to open div 2, then make it show div 2 but hide div 1 so that I can have the div's be in the same position, but they only show if they are supposed to.
My script:
<!-- SUPPORT CONTACT FORM START-->
<div class="contactSupportButton"><input type="button" src=".png" alt="contact support button" style="height: 40px; width: 120px" onClick="showSupForm()"/>
<div id="contactSupportForm">
TEST
</div>
</div>
<script type="text/javascript">
function showSupForm() {
document.getElementById('contactSupportForm').style.display = "block";
}
</script>
<!-- SUPPORT CONTACT FORM ENDING-->
<!-- BUSINESS CONTACT FORM START-->
<div class="contactBusinessButton"><input type="button" src=".png" alt="contact business button" style="height: 40px; width: 120px" onClick="showBusForm()"/>
<div id="contactBusinessForm">
TEST
</div>
</div>
<script type="text/javascript">
function showBusForm() {
document.getElementById('contactBusinessForm').style.display = "block";
}
</script>
<!-- BUSINESS CONTACT FORM ENDING-->
<!-- OTHER CONTACT FORM START-->
<div class="contactOtherButton"><input type="button" src=".png" alt="contact other button" style="height: 40px; width: 120px" onClick="showOtherForm()"/>
<div id="contactOtherForm">
TEST
</div>
</div>
<script type="text/javascript">
function showOtherForm() {
document.getElementById('contactOtherForm').style.display = "block";
}
</script>
<!-- OTHER CONTACT FORM ENDING-->
css part:
#contactSupportForm{
display: none;
}
#contactBusinessForm{
display: none;
}
#contactOtherForm{
display: none;
}
Here is a JSFiddle to show the whole process of how it works.
http://jsfiddle.net/m0jdv6u0/3/

You could try this:
function showOtherForm(idElement) {
document.getElementById('contactOtherForm').style.display = "none";
document.getElementById('contactSupportForm').style.display = "none";
document.getElementById('contactBusinessForm').style.display = "none"
document.getElementById(idElement).style.display = "block"
}
And you call in each button passing the id of the div, like this:
showOtherForm('contactOtherForm')
Of course, you can make some verifications, so you don't need to set the display on the 3 divs, but I think you dont need that...
Hope it helped!

There's probably a more elegant way to use classes as selectors and achieve the same functional goal, but here's a solution that would enable you to add additional form / button elements without having to add additional show/hide blocks:
[Note - this is not significantly different from #Cleversou's answer]
function showForm(elemId){
var arr = ["Other", "Business", "Support"] ;
for(var i = 0; i < arr.length; i++){
if(elemId === "contact" + arr[i] + "Form"){
document.getElementById(elemId).style.display = "block";
} else {
document.getElementById("contact" + arr[i] + "Form").style.display = "none";
}
}
}
#contactSupportForm{
display: none;
}
#contactBusinessForm{
display: none;
}
#contactOtherForm{
display: none;
}
<!-- SUPPORT CONTACT FORM START-->
<div class="contactSupportButton"><input type="button" src=".png" alt="contact support button" style="height: 40px; width: 120px" onClick="showForm('contactSupportForm')"/>
<div id="contactSupportForm">
TEST
</div>
</div>
<script type="text/javascript">
</script>
<!-- SUPPORT CONTACT FORM ENDING-->
<!-- BUSINESS CONTACT FORM START-->
<div class="contactBusinessButton"><input type="button" src=".png" alt="contact business button" style="height: 40px; width: 120px" onClick="showForm('contactBusinessForm')"/>
<div id="contactBusinessForm">
TEST
</div>
</div>
<script type="text/javascript">
</script>
<!-- BUSINESS CONTACT FORM ENDING-->
<!-- OTHER CONTACT FORM START-->
<div class="contactOtherButton"><input type="button" src=".png" alt="contact other button" style="height: 40px; width: 120px" onClick="showForm('contactOtherForm')"/>
<div id="contactOtherForm">
TEST
</div>
</div>
<script type="text/javascript">
</script>
<!-- OTHER CONTACT FORM ENDING-->

Develop Reference

JavaScript is the programming language of the Web.

How can I toggle texts and icons using jQuery? - javascript

Related

How to make it so that previous answer is displayed when number is clicked after equals in js calculator?

Refactoring jQuery repeating pattern

Change Icon on click and add a css class through javascript

Default .toggle() easing animation in jQuery not working

Hiding div on button click

Categories

Resources