Saturday, July 20, 2024
Friday, July 12, 2024
CSS Counter Sets
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
====================Output========================
Friday, July 5, 2024
Tuesday, July 2, 2024
Easy Accordion with Plus/Minus Icons
<!doctype HTML>
<html>
<head>
<meta content="text/html; charset=UTF-8" />
<title>Web Code Addict Accordion</title>
</head>
<body>
<div class="accordion_container">
<div class="accordion_heading">First Accordian Head<span class="plusminus">+</span>
</div>
<div class="accordion_content" style="display: none;">
<p>First Accordian Body, it will have description</p>
</div>
<div class="accordion_heading">Second Accordian Head<span class="plusminus">+</span>
</div>
<div class="accordion_content" style="display: none;">
<p>Second Accordian Body, it will have description</p>
</div>
<div class="accordion_heading">Third Accordian Head<span class="plusminus">+</span>
</div>
<div class="accordion_content" style="display: none;">
<p>Third Accordian Body, it will have description</p>
</div>
</div>
</body>
</html>
/////////////////////////////////CSS///////////////////////////////////////////////////
.accordion_container {
width: 500px;
}
.accordion_heading {
background-color:skyblue;
color: white;
cursor: pointer;
font-family: arial;
font-size: 14px;
margin: 0 0 1px 0;
padding: 7px 11px;
font-weight: bold;
}
.accordion_content {
background: lightgray;
}
.accordion_content p {
padding: 18px 5px;
margin: 0px;
}
.plusminus {
float:right;
}
/////////////////////////////////////////////Script/////////////////////////////
$(document).ready(function () {
$(".accordion_heading").click(function () {
if ($('.accordion_content').is(':visible')) {
$(".accordion_content").slideUp(300);
$(".plusminus").text('+');
}
if ($(this).next(".accordion_content").is(':visible')) {
$(this).next(".accordion_content").slideUp(300);
$(this).children(".plusminus").text('+');
} else {
$(this).next(".accordion_content").slideDown(300);
$(this).children(".plusminus").text('-');
}
});
});
Subscribe to:
Posts (Atom)
-
Web Design ,Logo Design, graphic design, website design: Web Design : encompasses many different skills and disciplines in the production a...
-
The Wedding is Responsive HTML theme for wedding planner websites. which helps you to build your own site. Wedding Planner theme has ... -
CSS tricks to show or hide horizontal and vertical scroll bar Sometimes we need to add scroll bar to a div or span whenever ...