Toggle show hide jquery

Size
3,433 Kb
Views
14,168

How do I make an toggle show hide jquery?

Little script to toggle a div based on a hyperlink being clicked.. What is a toggle show hide jquery? How do you make a toggle show hide jquery? This script and codes were developed by Peter Appleyard on 06 October 2022, Thursday.

Toggle show hide jquery Previews

Toggle show hide jquery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>toggle show hide jquery</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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> <a href="" id="buttonOne">Toggle</a>
<a href="" id="buttonTwo">Toggle2</a>
<div id="showContentOne"> ipsa ab illo! Rerum similique, eveniet aut eos sunt unde labore porro quos impedit, pariatur possimus voluptas aliquid numquam tempora asperiores adipisci debitis aperiam fugit corrupti nulla nihil! Quibusdam accusamus natus enim esse praesentium, fugit modi eius aut dolorum labore cupiditate, mollitia perferendis consectetur. Quas eveniet quia doloribus, eius in ipsam modi et libero ducimus fugit optio voluptate dicta minima alias expedita excepturi reiciendis hic nulla animi ullam magni. Maiores sequi, dignissimos. Assumenda modi aliquam, eveniet repudiandae suscipit animi dolorem vitae voluptas id provident laborum sapiente. Nemo aspernatur totam, in delectus obcaecati facere est perferendis iusto eius fuga, accusantium doloremque eveniet, debitis reiciendis non voluptatem aperiam iste, repellat quidem ad quos mollitia sunt quasi corrupti odio. Iste nesciunt, temporibus nihil commodi sit eaque iusto quibusdam, excepturi sunt nobis dignissimos numquam reprehenderit minus at. Quas laudantium ex voluptates, nisi soluta dolor modi at optio eos, iusto, quidem nobis minus nam sapiente itaque molestias deleniti pariatur. Dolorem aperiam eum optio hic! Illo, quisquam, a.
</div>
<div id="showContentTwo"> ipsa ab illo! Rerum similique, eveniet aut eos sunt unde labore porro quos impedit, pariatur possimus voluptas aliquid numquam tempora asperiores adipisci debitis aperiam fugit corrupti nulla nihil! Quibusdam accusamus natus enim esse praesentium, fugit modi eius aut dolorum labore cupiditate, mollitia perferendis consectetur. Quas eveniet quia doloribus, eius in ipsam modi et libero ducimus fugit optio voluptate dicta minima alias expedita excepturi reiciendis hic nulla animi ullam magni. Maiores sequi, dignissimos. Assumenda modi aliquam, eveniet repudiandae suscipit animi dolorem vitae voluptas id provident laborum sapiente. Nemo aspernatur totam, in delectus obcaecati facere est perferendis iusto eius fuga, accusantium doloremque eveniet, debitis reiciendis non voluptatem aperiam iste, repellat quidem ad quos mollitia sunt quasi corrupti odio. Iste nesciunt, temporibus nihil commodi sit eaque iusto quibusdam, excepturi sunt nobis dignissimos numquam reprehenderit minus at. Quas laudantium ex voluptates, nisi soluta dolor modi at optio eos, iusto, quidem nobis minus nam sapiente itaque molestias deleniti pariatur. Dolorem aperiam eum optio hic! Illo, quisquam, a.
</div>
<div class="content"><p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, autem nobis perferendis nostrum natus explicabo nesciunt praesentium delectus aliquid culpa ex cum maiores alias quasi illo tenetur iste adipisci aut architecto obcaecati quia fugiat, facere et. Rerum officia iure, exercitationem doloremque delectus, est eveniet quibusdam blanditiis ratione officiis modi! Vero similique soluta, impedit itaque exercitationem ipsum velit dicta facere error voluptates officia earum laboriosam molestiae, magnam eveniet cupiditate deleniti natus aspernatur dignissimos suscipit expedita, deserunt. Dolorum, officia reprehenderit sunt dicta.</span><span>Delectus adipisci amet vero, obcaecati repellendus ipsa consequuntur, iste id asperiores vitae. Ullam at dignissimos voluptate accusamus, architecto laudantium labore unde ab. Expedita necessitatibus officiis, voluptatum. Perspiciatis voluptas a ad minus doloremque magnam unde facilis atque velit dicta delectus accusamus natus, placeat dolores! Esse atque, sunt laboriosam in, inventore fugit beatae harum natus molestiae laudantium dolorum eius aliquam id, ea deserunt expedita deleniti quod. Rem, eius adipisci error dolores magnam esse molestiae, quia fuga, accusantium quas, soluta officiis voluptatibus sapiente!</span></p></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 show hide jquery - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { margin: 20px; color: #222;
}
#showContentTwo,
#showContentOne { display: none; background-color: #bada55; padding: 20px;
}
a { background-color: red; padding: 10px 30px; display: inline-block; text-decoration: none; color: #FFF; margin-bottom: 10px;
}
a.inactive { opacity: 0.3;
}

Toggle show hide jquery - Script Codes JS Codes

$( "#buttonOne" ).click(function(evt) { evt.preventDefault(); $( "#showContentOne" ).slideDown("fast"); $( "#showContentTwo" ).slideUp("fast"); $( "#buttonTwo" ).removeClass("active").addClass("inactive"); $( "#buttonOne" ).addClass("active").removeClass("inactive");
});
$( "#buttonTwo" ).click(function(evt) { evt.preventDefault(); $( "#showContentTwo" ).slideDown("fast"); $( "#showContentOne" ).slideUp("fast"); $( "#buttonOne" ).removeClass("active").addClass("inactive"); $( "#buttonTwo" ).addClass("active").removeClass("inactive");
});
Toggle show hide jquery - Script Codes
Toggle show hide jquery - Script Codes
Home Page Home
Developer Peter Appleyard
Username whodaman
Uploaded October 06, 2022
Rating 3
Size 3,433 Kb
Views 14,168
Do you need developer help for Toggle show hide jquery?

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!

Peter Appleyard (whodaman) Script Codes
Create amazing marketing copy 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!