JQuery Toggle Divs of Baseball Heros

Developer
Daniel Ilse
Size
4,924 Kb
Views
18,216
  1. JQuery Toggle Divs of Baseball Heros Previews
  2. JQuery Toggle Divs of Baseball Heros HTML Codes
  3. JQuery Toggle Divs of Baseball Heros CSS Codes
  4. JQuery Toggle Divs of Baseball Heros JS Codes

How do I make an jquery toggle divs of baseball heros?

Using jQuery in order to show/hide different sections of content using navigation. This adds/removes an 'active' class from the nav items, and uses the active items link reference to show the corresponding content section.. What is a jquery toggle divs of baseball heros? How do you make a jquery toggle divs of baseball heros? This script and codes were developed by Daniel Ilse on 01 November 2022, Tuesday.

JQuery Toggle Divs of Baseball Heros Previews
IQ Test

JQuery Toggle Divs of Baseball Heros - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Toggle Divs of Baseball Heros</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> <main id="main">	<nav class="nav">	<a href="#first" class="nav-item active">Mickey Mantle</a>	<a href="#second" class="nav-item">Babe Ruth</a>	<a href="#third" class="nav-item">Joe DiMaggio</a>	<a href="#fourth" class="nav-item">Jackie Robinson</a>	</nav>	<div class="container" id="first">	<div class="container-image"><img src="http://dantilse.com/wp-content/uploads/2016/05/mickey_mantle.jpg" alt="Mickey Mantle" /></div>	<h2 class="container-title">Mickey Mantle</h2>	<p class="container-bio"><strong>Mickey Charles Mantle</strong> (October 20, 1931 – August 13, 1995), nicknamed "The Commerce Comet" and "The Mick", was an American professional baseball player. Mantle played his entire Major League Baseball (MLB) career with the New York Yankees as a center fielder and first baseman, from 1951 through 1968. Mantle was one of the best players and sluggers, and is regarded by many as the greatest switch hitter in baseball history. Mantle was inducted into the National Baseball Hall of Fame in 1974 and was elected to the Major League Baseball All-Century Team in 1999. Mantle was arguably the greatest offensive threat of any center fielder in baseball history. He has the highest career OPS+ of any center fielder and he had the highest stolen base percentage in history at the time of his retirement.</p>	</div>	<div class="container" id="second">	<div class="container-image"><img src="http://dantilse.com/wp-content/uploads/2016/05/babe_ruth.jpg" alt="Babe Ruth" /></div>	<h2 class="container-title">Babe Ruth</h2>	<p class="container-bio"><strong>George Herman Ruth Jr.</strong> (February 6, 1895 – August 16, 1948) was an American professional baseball player whose career in Major League Baseball (MLB) spanned 22 seasons, from 1914 through 1935. Nicknamed "The Bambino" and "The Sultan of Swat", he began his MLB career as a stellar left-handed pitcher for the Boston Red Sox, but achieved his greatest fame as a slugging outfielder for the New York Yankees. Ruth established many MLB batting (and some pitching) records, including career home runs (714), runs batted in (RBIs) (2,213), bases on balls (2,062), slugging percentage (.690), and on-base plus slugging (OPS) (1.164); the latter two still stand today. Ruth is regarded as one of the greatest sports heroes in American culture and is considered by many to be the greatest baseball player of all time. He was one of the first five inductees into the National Baseball Hall of Fame in 1936.</p>	</div>	<div class="container" id="third">	<div class="container-image"><img src="http://dantilse.com/wp-content/uploads/2016/05/joe_dimaggio.jpg" alt="Joe DiMaggio" /></div>	<h2 class="container-title">Joe DiMaggio</h2>	<p class="container-bio"><strong>Joseph Paul DiMaggio</strong> (November 25, 1914 – March 8, 1999), nicknamed "Joltin' Joe" and "the Yankee Clipper", was an American Major League Baseball center fielder who played his entire 13-year career for the New York Yankees. He is perhaps best known for his 56-game hitting streak (May 15 – July 16, 1941), a record that still stands. DiMaggio was a three-time MVP winner and an All-Star in each of his 13 seasons. During his tenure with the Yankees, the club won ten American League pennants and nine World Series championships. At the time of his retirement, he ranked fifth in career home runs (361) and sixth in career slugging percentage (.579). He was inducted into the Baseball Hall of Fame in 1955, and was voted the sport's greatest living player in a poll taken during the baseball centennial year of 1969.</p>	</div>	<div class="container" id="fourth">	<div class="container-image"><img src="http://dantilse.com/wp-content/uploads/2016/05/jackie_robinson.jpg" alt="Jackie Robinson" /></div>	<h2 class="container-title">Jackie Robinson</h2>	<p class="container-bio"><strong>Jack Roosevelt "Jackie" Robinson</strong> (January 31, 1919 – October 24, 1972) was an American Major League Baseball (MLB) second baseman who became the first African American to play in the major leagues in the modern era. Robinson broke the baseball color line when the Brooklyn Dodgers started him at first base on April 15, 1947. The Dodgers, by playing Robinson, heralded the end of racial segregation that had relegated black players to the Negro leagues since the 1880s. Robinson was inducted into the Baseball Hall of Fame in 1962. Robinson had an exceptional 10-year baseball career. He was the recipient of the inaugural MLB Rookie of the Year Award in 1947, was an All-Star for six consecutive seasons from 1949 through 1954, and won the National League Most Valuable Player Award in 1949—the first black player so honored. Robinson played in six World Series and contributed to the Dodgers' 1955 World Series championship. In 1997, MLB "universally" retired his uniform number, 42, across all major league teams; he was the first pro athlete in any sport to be so honored.</p>	</div>	</main> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Toggle Divs of Baseball Heros - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
#main { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; max-width: 1200px; padding: 20px; margin: 0 auto;
}
.nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 10px 20px; margin-top: 40px; margin: 40px auto 0 0;
}
.nav-item { position: relative; padding: 0 5px; margin: 0 5px; font-size: 1.5em; font-weight: 700; color: #595959; text-decoration: none; line-height: 1.5;
}
.nav-item:before { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #595959; -webkit-transition: all 500ms; transition: all 500ms;
}
.nav-item.active { color: black;
}
.nav-item.active:before { width: 100%;
}
.container { -webkit-box-flex: 1; -ms-flex: 1 1 300px; flex: 1 1 300px; padding: 40px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px;
}
.container:not(:first-of-type) { display: none;
}
.container-image { width: 50%; margin: 0 auto;
}
.container-image img { width: 100%; height: auto; border: 5px solid #f6f6f6;
}
.container-title { text-align: center;
}

JQuery Toggle Divs of Baseball Heros - Script Codes JS Codes

$(document).ready(function(){	$('.nav-item').click(function(){	$('.nav-item').removeClass("active");	$(this).addClass("active");	// return needed to make function work	return false;	});	$('.nav-item').click(function() {	$('.container').slideUp(500);	$(this.getAttribute('href')).delay(500).slideDown(500);	});
}); // document ready
JQuery Toggle Divs of Baseball Heros - Script Codes
JQuery Toggle Divs of Baseball Heros - Script Codes
Home Page Home
Developer Daniel Ilse
Username dantilse
Uploaded November 01, 2022
Rating 3
Size 4,924 Kb
Views 18,216
Do you need developer help for JQuery Toggle Divs of Baseball Heros?

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!

Daniel Ilse (dantilse) Script Codes
Name
Sass Color Functions
Flexbox Navigation
Profile Card with Gradient Background Animation
Matt Goad Artspace Logo
Columns Mixin
Breakpoint Example
Hamburger Menu Icon Sass Mixin
Nav Hover States
Nav Wizard Example
Portfolio Filter using jQuery
Create amazing sales emails 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!