This content originally appeared on DEV Community and was authored by Muhammad Rauf
How to show and hide elements using jQuery. When you click the mouse over some HTML element then some further information will show up, and when you click mouse out from that element, the further message automatically gets hidden, hereinbelow example I have utilized mouse click to hide and show the additional message, you can use any event as per your requirement.
Show/Hide elements jQuery
jQuery is a powerful Javascript library which makes adding useful Javascript stuff to your website easy across browsers. This post looks at how to show and hide an element with jQuery using the show(), hide(), toggle(), fadeIn() and fadeOut() functions.
The most simple way to hide an element with jQuery is to call .hide() and then .show() to show it again. This makes the element instantly show or hide.
we are hiding a div by calling their id "show" and the CSS class "soft-toggle". Now let's see the practical example below.
HTML Code:
<script src='https://code.jquery.com/jquery-1.7.2.js'></script>
<div class="soft">
<button id="#show" class="soft-toggle">Show</button>
</div>
<div id="show" style="display:none">
<p>Something is hidden By SoftCodeOn</p>
</div>
CSS Code:
<style>
.soft{text-align:center;}
.soft-toggle {
border: 1px solid #eee;
font-size:30px;
background:#000;
color:#fff;
width:200px;
height:100px;
border-radius:30px;
}
#show{text-align:center;}
</style>
JavaScript Code:
<script id="rendered-js" >
$(document).ready(function () {
$('.soft-toggle').click(function () {
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function () {
if ($(this).css('display') == 'none') {
//change the button label to be 'Show'
toggle_switch.html('Show');
} else {
//change the button label to be 'Hide'
toggle_switch.html('Hide');
} }); });});
</script>
This is all fairly basic usage in these two post using these functions; you probably normally wouldn’t show and hide elements from clicking buttons but it makes it easy to illustrate the point.
Common uses for showing and hiding stuff is when hovering over a navigation element and showing a sub-menu, or showing the shopping cart contents when clicking a shopping cart icon on an e-commerce page. View Original with detail : Show and Hide Elements using jQuery. I hope you like this post, Please discuss below if you face any problem or query. Thank you.
This content originally appeared on DEV Community and was authored by Muhammad Rauf
Muhammad Rauf | Sciencx (2021-11-16T18:10:28+00:00) Show and Hide Elements using jQuery. Retrieved from https://www.scien.cx/2021/11/16/show-and-hide-elements-using-jquery/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.