Simple content swap
How do I make an simple content swap?
*for Kattis. What is a simple content swap? How do you make a simple content swap? This script and codes were developed by SNÖGRAFX on 26 August 2022, Friday.
Simple content swap - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple content swap</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='london' class='city'>Tut-tut</div>
<div id='helsinki' class='city'>Kiitos</div>
<div id='rwd' class='navi'>Previous</div>
<div id='fwd' class='navi'>Next</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>
Simple content swap - Script Codes CSS Codes
.city { height: 200px; width: 800px; color: white; border: 4px navy solid; margin: 4px auto; padding: 4px;
}
#london { background: red;
}
#helsinki { display: none; background: blue;
}
.navi { height: 40px; width: 80px; background: lime; border: 4px navy solid; margin: 4px; padding: 4px;
}
.navi:hover { cursor: pointer; border: 4px blue solid;
}
#rwd { float: left; display: none;
}
#fwd { float: right;
}
Simple content swap - Script Codes JS Codes
$('#fwd').click(function() { $('#london, #fwd').hide(); $('#helsinki, #rwd').show();
});
$('#rwd').click(function() { $('#london, #fwd').show(); $('#helsinki, #rwd').hide();
});
Developer | SNÖGRAFX |
Username | snografx |
Uploaded | August 26, 2022 |
Rating | 3 |
Size | 1,859 Kb |
Views | 26,312 |
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!
Name | Size |
CityPlanner fallback | 4,228 Kb |
Mapbox centred | 1,740 Kb |
Google-style CSS options button | 2,293 Kb |
Norkart CityPlanner ribbon logo | 1,957 Kb |
Clickable back element | 1,517 Kb |
Owl Carousel, Centred Content | 2,773 Kb |
Hide on inactivity | 2,082 Kb |
Basic parallax | 2,269 Kb |
Full page parallax | 1,957 Kb |
CSS X | 2,024 Kb |
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!
Name | Username | Size |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
Scroll using CSS | Casperovic | 2,159 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
Toggle menu | Seyedi | 2,279 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
3D-box | Parthviroja | 2,346 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!