Toggle graph phases with menu of phases

Developer
Mia Sno
Size
3,030 Kb
Views
14,168
  1. Toggle graph phases with menu of phases Previews
  2. Toggle graph phases with menu of phases HTML Codes
  3. Toggle graph phases with menu of phases CSS Codes
  4. Toggle graph phases with menu of phases JS Codes

How do I make an toggle graph phases with menu of phases?

JQuery that toggles graph phases with a menu - when all menu colors are light gray - off state, the graph is blank with a message to click on a menu button for a phase. When the menu is clicked that phase comes up and they overlay each other.. What is a toggle graph phases with menu of phases? How do you make a toggle graph phases with menu of phases? This script and codes were developed by Mia Sno on 12 August 2022, Friday.

Toggle graph phases with menu of phases Previews
IQ Test

Toggle graph phases with menu of phases - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>toggle graph phases with menu of phases</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="meet_relief clearfix"> <div class="clearfix"> <div class="fleft" style="width: 570px"><h2 class="pad0">Long Lasting Relief</h2> <p class="blue f15">Clinically proven* to reduce lower back pain and sustain relief for up to 3 weeks.</p> </div> <div class="fright" style="width: 260px; padding-top: 10px;"> <p class="robotomedium f13 text-center pad6">CLICK TO VIEW PHASES OF TREATMENT</p> <div class="phase_btns robotomedium clearfix"> <a class="before_btn beforeblue" href="#">BEFORE</a> <a class="during_btn duringgreen" href="#">DURING</a> <a class="after_btn aftergray" href="#">AFTER</a> </div> </div> </div> <div class="phase_chart"> <div class="beforechart"><img src="//dx6i5pkyrcr70.cloudfront.net/images/before_data.png" width="811" height="209" /></div> <div class="duringchart"><img src="//dx6i5pkyrcr70.cloudfront.net/images/during_data.png" width="811" height="129" /></div> <div class="afterchart"><img src="//dx6i5pkyrcr70.cloudfront.net/images/after_data.png" width="811" height="125" /></div> <div class="nochart">Click on a phase above<br>to view data</div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Toggle graph phases with menu of phases - Script Codes CSS Codes

div {
position:relative;
}
.fleft {float:left;}
.fright {float:right;}
.clear {clear:both;}
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
a { text-decoration: none;
}
.phase_btns {	text-align:center;
}
.phase_btns a {	height: 25px;	line-height: 25px;	width: 73px;	vertical-align:middle;	text-align:center; display: inline-block; margin: 0 6px 0 3px;	color: #fff;	border-radius: 8px;	-webkit-border-radius: 8px;	background: #ccc;
}
.phase_btns a:hover {	color: #fff;	opacity: .8;
}
.phase_btns a.beforeblue {	background: #00849A !important;
}
.phase_btns a.duringgreen {	background: #6AC9B9 !important;
}
.phase_btns a.aftergray {	background: #626569 !important;
}
.phase_chart {	background: url(../content/images/relief_bg.png) no-repeat;	width: 920px;	height: 451px;
}
.beforechart {	display: xnone;	position: absolute;	left: 87px;	top: 70px;	width: 811px;
}
.duringchart {	display: xnone;	position: absolute;	left: 88px;	top: 144px;	width: 811px;
}
.afterchart {	display: xnone;	position: absolute;	left: 88px;	top: 175px;	width: 811px;
}
.nochart {	display: none;	position: absolute;	left: 67px;	top: 169px;	font-weight: 100;	font-size: 40px;	text-align:center;	width: 831px;
}

Toggle graph phases with menu of phases - Script Codes JS Codes

 // fade toggle phase buttons $(".before_btn").click(function (e) { e.preventDefault(); $(this).toggleClass("beforeblue", 500); $(".beforechart").fadeToggle(500); }); $(".during_btn").click(function (e) { e.preventDefault(); $(this).toggleClass("duringgreen", 500); $(".duringchart").fadeToggle(500); }); $(".after_btn").click(function (e) { e.preventDefault(); $(this).toggleClass("aftergray", 500); $(".afterchart").fadeToggle(500); }); // show when there is no phase chosen in chart
$(function() {	$(".after_btn").click(function(e) { if ($('.before_btn').css('background-color') == 'rgb(204, 204, 204)' && $('.during_btn').css('background-color') == 'rgb(204, 204, 204)' && $('.after_btn').css('background-color') == 'rgb(204, 204, 204)') {	$('.nochart').fadeIn(); } else {	$('.nochart').hide(); }	});	$(".before_btn").click(function(e) { if ($('.before_btn').css('background-color') == 'rgb(204, 204, 204)' && $('.during_btn').css('background-color') == 'rgb(204, 204, 204)' && $('.after_btn').css('background-color') == 'rgb(204, 204, 204)') {	$('.nochart').fadeIn(); } else {	$('.nochart').hide(); }	});	$(".during_btn").click(function(e) { if ($('.before_btn').css('background-color') == 'rgb(204, 204, 204)' && $('.during_btn').css('background-color') == 'rgb(204, 204, 204)' && $('.after_btn').css('background-color') == 'rgb(204, 204, 204)') {	$('.nochart').fadeIn(); } else {	$('.nochart').hide(); }	});
});
Toggle graph phases with menu of phases - Script Codes
Toggle graph phases with menu of phases - Script Codes
Home Page Home
Developer Mia Sno
Username mrs_snow
Uploaded August 12, 2022
Rating 3
Size 3,030 Kb
Views 14,168
Do you need developer help for Toggle graph phases with menu of phases?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mia Sno (mrs_snow) Script Codes
Name
Smooth Scroll To Anchor With jQuery
Img Swap on hover or mouseover with JQuery
Placeholder sample for IE
Print element on a page
Sample fancybox 2 overlay with no wrapper and custom close
QA list with content property
Sticky Navigation or Section with jQuery
Add id to body tag based on url jQuery
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!