<!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>
<!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('-');
}
});
});
In WordPress, instead of simply adding these to the header, you should use a method called enqueueing which is a standardized way of handling your assets with the added bonus of managing dependencies. Find out how to do it below using wp_enqueue_scripts.
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'owl-style', get_stylesheet_directory_uri() . '/assets/css/owl.carousel.min.css');
wp_enqueue_style( 'owl-default-style', get_stylesheet_directory_uri() . '/assets/css/owl.theme.default.min.css');
//wp_enqueue_script( 'owl-carousel', get_stylesheet_directory_uri() . '/assets/js/owl.carousel.min.js', array(), '1.0.0', true);
}
function add_this_script_footer() {
wp_enqueue_script( 'owl.carousel-js', get_stylesheet_directory_uri() . '/assets/js/owl.carousel.min.js');
wp_enqueue_script( 'scripts_js', get_stylesheet_directory_uri() . '/assets/js/scripts.js');
}
add_action('wp_footer', 'add_this_script_footer');
Bluehost: This hosting server is popular among bloggers, small businesses, and WordPress users. It offers easy-to-use control panels, reliable uptime, and excellent customer support. https://www.bluehost.com/
HostGator: HostGator is a popular hosting server for small businesses, offering flexible plans, unlimited bandwidth, and 24/7 customer support. https://hotstar.com/
SiteGround: SiteGround is known for its fast loading speeds, excellent customer support, and user-friendly interface. It's a popular choice for WordPress sites and e-commerce stores. https://world.siteground.com/
A2 Hosting: A2 Hosting is a reliable hosting server with fast loading speeds, excellent uptime, and affordable pricing. It offers a variety of hosting plans, including shared, VPS, and dedicated hosting. https://www.a2hosting.com/
DreamHost: DreamHost is a reliable and user-friendly hosting server with a wide range of features and tools. It offers unlimited bandwidth and storage, free SSL certificates, and easy WordPress installation. https://www.dreamhost.com/
It's important to research and compares different hosting servers before choosing one that best suits your needs. Consider factors such as pricing, uptime, customer support, and features offered.
