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 |
Norkart CityPlanner ribbon logo | 1,957 Kb |
CityPlanner SVG POI bubble | 2,884 Kb |
Vertical image scroller with hover arrows | 2,367 Kb |
Mondrian Flexbox | 2,229 Kb |
Mapbox centred | 1,740 Kb |
Hide on inactivity | 2,082 Kb |
Clickable back element | 1,517 Kb |
CSS Navigation buttons | 2,460 Kb |
Huzzo spinner | 1,748 Kb |
Owl Carousel, Centred Content | 2,773 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 |
Perspective Origin Demo | Agelber | 3,614 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
Sort the Knowlege | Eprouver | 3,915 Kb |
Twitch.tv API | Ryzokuken | 2,618 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Animated skewed panes | NyX | 4,462 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Ball physics | Blackkbot | 3,874 Kb |
A Pen by Anoop | Anoopjohn | 330,760 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 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!