Remove Class On Click Outside

Developer
Parth Viroja
Size
1,992 Kb
Views
38,456
  1. Remove Class On Click Outside Previews
  2. Remove Class On Click Outside HTML Codes
  3. Remove Class On Click Outside CSS Codes
  4. Remove Class On Click Outside JS Codes

How do I make an remove class on click outside?

What is a remove class on click outside? How do you make a remove class on click outside? This script and codes were developed by Parth Viroja on 03 September 2022, Saturday.

Remove Class On Click Outside Previews
IQ Test

Remove Class On Click Outside - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Remove Class On Click Outside</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul> <li class="dropdown"></li> <li class="dropdown active"></li> <li class="dropdown"></li> <li class="dropdown"></li> <li class="dropdown"></li> <li class="dropdown active"></li> <li class="dropdown active"></li> <li class="dropdown"></li> <li class="dropdown"></li> <li class="dropdown"></li> <li class="dropdown active"></li> <li class="dropdown"></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Remove Class On Click Outside - Script Codes CSS Codes

body { padding:50px; display:block;
}
li { display:inline-block; height:100px; width:100px; margin:3px; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out;
}
.dropdown { background:#ccc;
}
.active { background:#990000; box-shadow:0px 0px 10px rgba(0,0,0,0.4);
}

Remove Class On Click Outside - Script Codes JS Codes

// remove all .active classes when clicked anywhere
hide = true;
$('body').on("click", function () { if (hide) $('.dropdown').removeClass('active'); hide = true;
});
// add and remove .active
$('body').on('click', '.dropdown', function () { var self = $(this); if (self.hasClass('active')) { $('.dropdown').removeClass('active'); return false; } $('.dropdown').removeClass('active'); self.toggleClass('active'); hide = false;
});
Remove Class On Click Outside - Script Codes
Remove Class On Click Outside - Script Codes
Home Page Home
Developer Parth Viroja
Username parthviroja
Uploaded September 03, 2022
Rating 3
Size 1,992 Kb
Views 38,456
Do you need developer help for Remove Class On Click Outside?

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!

Parth Viroja (parthviroja) Script Codes
Name
Responsive grid with filter, sort and layout
Custom checkbox and radio with menu
3D-box
Page load animation
Text Shapes
MY CV
Ripple Effect
Ubuntu Terminal
Jquery Tab
Slide up down
Create amazing web content 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!