How to create html css faq template design with jquery accordion | faq section design
Hi Guys!!!
Today In this post you are going to learn how to create the beautiful FAQ section.
This Tutorial is very much help full for the beginners to create FAQ section and use it in their projects.......
This project is done by my friend in his project( and his Name is Mr. Nimmala Rakesh Reddy).
You all please thank him in providing this project......
Source Code Explanation:
Follow the below steps to create the FAQ section
Step 1: First of all write the basic html code...... by creating the file with the name index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Step 2: Attach all the css and javascript files included as shown below
<!DOCTYPE Html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Project Creator ---- Nimmala Rakesh Reddy</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
</body>
</html>
step 3: Now create a separate file and save it as style.css
Now below is the source code given, you can use it in your project.
Output of the below source code.
Html file(index.html)
<!DOCTYPE Html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Project Creator ---- Nimmala Rakesh Reddy</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="header">
<h1><br>FAQs</h1>
<button class="btn1">Book an Appointment</button>
</div>
<div class="container">
<div class:"row">
<div class="col-mid-6">
<div class="accordion accordion-flush" id="accordionFlushExample">
<!--------------------1---------->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> What are joint pains? </button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Joint pain could be a common grievance that refers to erratic or constant discomfort, aches, and soreness in any of the joints of the body. One could feel it within the knees whereas walking or within the shoulders whereas lifting associate degree object. Sometimes, joint pain is that the results of associate degree health problem or injury whereas in some cases inflammatory disease also can be a standard reason behind joint pain. alternative factors like alimentation deficiencies, harsh climate, improper postures, etc, also can cause joint pains.</div>
</div>
</div>
<!-----------2------------->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"> Is joint pain a serious health problem? </button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Your body will offer varied signals if the joints ar in hassle. Visit a doctor if you don’t apprehend the reason behind your joint pain and ar experiencing symptoms like if the realm round the joint is swollen, red, tender, or take the bit, the pain persists for 3 days or additional, otherwise you have a fever however no different signs of the infections. Also, rush to AN orthopaedic specialist if any of the subsequent occurs:<br>
<ul>
<li>You’ve received a serious injury</li>
<li>The joint appears deformed</li>
<li>Sudden swelling of the joint and stiffness</li>
<li>The joint is completely immobile</li>
<li>You have severe joint pain</li>
<li>Your daily activities like walking, lifting objects, changing posture like getting up from chair, climbing stairs are getting hampered</li></ul>
</div>
</div>
</div>
<!--------------------3---------->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingthree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapsethree" aria-expanded="false" aria-controls="flush-collapsethree">What is Arthritis?</button>
</h2>
<div id="flush-collapsethree" class="accordion-collapse collapse" aria-labelledby="flush-headingthree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Arthritis is an inflammation of the joints. It can affect one or multiple joints in the body. There are more than 100 different types of arthritis and each having different causes and treatment approach. Two of the most common types are Osteoarthritis (OA) and Rheumatoid Arthritis (RA). The symptoms of arthritis develop over time, but they may also appear early. Arthritis is more common among adults aged 65years or older, but it can also develop in children, teens, and younger adults. Arthritis is more prevalent in women than men and in people who are overweight. It is a broad term for a host of joint ailments and a proper diagnosis is required to determine the cause and treatment of this ailment.
</div>
</div>
</div>
<!--------------------4---------->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingfour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapsefour" aria-expanded="false" aria-controls="flush-collapsefour">What are the symptoms of arthritis?</button>
</h2>
<div id="flush-collapsefour" class="accordion-collapse collapse" aria-labelledby="flush-headingfour" data-bs parent="#accordionFlushExample">
<div class="accordion-body">The most common symptoms of arthritis are joint pains, loss of flexibility, cracking sounds, mild swelling around a joint. One may also find difficulty in movement or the presence of stiffness in the concerned joint area. Many people with arthritis experience symptoms worse in the morning hours and more so in the winter season.<br>
In the case of Rheumatoid Arthritis (RA), one may also feel tired or experience a loss of appetite due to the inflammation that the immune system’s activity causes. The person may also become anemic (decreased red blood cell count) or have a consistent slight fever. Severe RA can cause joint deformity if left untreated.
</div>
</div>
</div>
<!-------5----->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse5" aria-expanded="false" aria-controls="flush-collapse5">What is Rheumatoid arthritis (RA)?</button>
</h2>
<div id="flush-collapse5" class="accordion-collapse collapse" aria-labelledby="flush-heading5" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Rheumatoid arthritis (RA) is a long-term, progressive, and an autoimmune disease that causes inflammation, swelling, and pain in and around the joints and other body parts. The body’s immune system, which normally protects the body from the bacteria and virus attacks – mistakenly, attacks the joints. As a result, inflammation occurs in the target tissue or organ. Rheumatoid Arthritis most commonly affects the joints of the hands, feet, wrists, elbows, knees and ankles. The tendons and ligaments that hold the joint together can also weaken and stretch over a period of time. Ligaments connect the bones to each other while tendons connect muscles to the bone. In Rheumatoid Arthritis, the joint eventually loses its shape and configuration and as a result the damage can be severe. Symptoms include:<br>
<ul>
<li>pain, swelling, and stiffness in more than one joint especially upon getting up in the mornings or after sitting down for a while</li>
<li>symmetrical joint involvement, the same joints on both sides of the body</li>
<li>joint deformity</li>
<li>unsteadiness when walking</li>
<li>a general feeling of being unwell</li>
<li>fever</li>
<li>loss of function and mobility</li>
<li>weight loss</li>
<li>weakness</li>
</ul>
</div>
</div>
</div>
<!-------6----->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading6">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse6" aria-expanded="false" aria-controls="flush-collapse6">What is Osteoarthritis (OA)?</button>
</h2>
<div id="flush-collapse6" class="accordion-collapse collapse" aria-labelledby="flush-heading6" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Osteoarthritis (OA) is the most common type of arthritis affecting millions of people worldwide. It occurs when the protective cartilage on the ends of bones at the joint wears down over time. As a result, the bone then starts to rub against other thereby causing pain, swelling and stiffness. Although osteoarthritis can damage any joint in the body, the disorder most commonly affects joints in hands, knees, hips, lower back and spine. Common risk factors include:<br>
<ul>
<li>Increasing age</li>
<li> Gender: Females are more at risk</li>
<li>Obesity</li>
<li>Previous joint injury</li>
<li>Occupational factors, overuse of the joint</li>
<li>Weak muscles</li>
<li>Genetic causes</li>
<li>Metabolic or hormonal disorders</li>
</ul>
</div>
</div>
</div>
<!-------7----->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading7">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse7" aria-expanded="false" aria-controls="flush-collapse7">Is osteoarthritis (OA) is more common in women?</button>
</h2>
<div id="flush-collapse7" class="accordion-collapse collapse" aria-labelledby="flush-heading7" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Unfortunately, osteoarthritis (OA) is more likely to affect women than men. By nature, women face a triple threat of risk factors when it comes to arthritis: biology, genetic predisposition, and hormones. Many women past age 50 discover Osteoarthritis is the reason for their creaking knees, aching backs, and sore fingers. As osteoarthritis worsens over time, bones may break down and develop growths called spurs. These extra bits of bone feel like hard lumps and may form around the affected joint. While in men, arthritis in their hips is more common, in women the knees or hands are more vulnerable.
</div>
</div>
</div>
<!-------8----->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading8">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse8" aria-expanded="false" aria-controls="flush-collapse8">Does arthritis affect one's daily life?</button>
</h2>
<div id="flush-collapse8" class="accordion-collapse collapse" aria-labelledby="flush-heading8" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Pain, swelling or stiffness can make it difficult to perform day to day tasks. Simple acts like making the bed, opening a can of food, holding a plate or a cup of tea or driving can become difficult. Patients with severe arthritis in their hands are unable to even flip the pages of a newspaper. In cases where arthritis inflicts the lower body joints; activities such as walking, climbing stairs, performing exercises and lifting objects may become difficult. Moreover, people with osteoarthritis experience more falls and have greater risk of fracture than those without osteoarthritis.
</div>
</div>
</div>
<!-------9----->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading9">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse9" aria-expanded="false" aria-controls="flush-collapse9">Can Arthritis be managed or controlled?</button>
</h2>
<div id="flush-collapse9" class="accordion-collapse collapse" aria-labelledby="flush-heading9" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">While one can control arthritis, it is sometimes difficult to completely cure or eradicate it. An arthritis patient must take extreme care of his health and make necessary lifestyle changes that will benefit in keeping arthritis under control such as:<br><br>
1. Keep the joints moving – Sedentary lifestyle with minimum activity makes joints stiffer. Light stretching and slow walks keep the joints flexible and moving.<br>
2. Maintain the right posture – Long hours of sitting hunched over your laptop can create havoc with both your knees & shoulder joints. Similarly standing in a stooped manner adds pressure to the neck and back which can worsen your issues in the long run.<br>
3. Maintain healthy body weight – Being overweight or obese can increase arthritis and contribute to arthritis pain, especially if one is a knee patient.<br>
4. Quit smoking – Smoking causes stress on connective tissues which can further increase arthritis pain. Give it up!<br>
5. Avoid high impact activities that can add stress to your muscles such as running, jogging, jumping, high-powered sports, etc.<br>
6. Over-the-counter pain medications can help relieve occasional bouts of pain triggered by over-exertion. But they have side effects on Kidneys and other organs therefore make sure you visit an orthopedic specialist if the pain is recurring and refuses to subside with medication.
</div>
</div>
</div>
<!-------10----->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading10">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse10" aria-expanded="false" aria-controls="flush-collapse10">When should one consult an orthopedic surgeon or doctor?</button>
</h2>
<div id="flush-collapse10" class="accordion-collapse collapse" aria-labelledby="flush-heading10" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">If a person is plagued with arthritis symptoms like recurring pain in the joints, stiffness, lack of flexibility, difficulty in performing simple tasks, consistent fatigue, low-grade fever, aches while moving any joint, constant creaking or grinding noises, limited or no relief from painkillers; immediately consult the best orthopedic surgeon who can carry out the necessary tests to determine if the patient is experiencing generic pains or is it the stage of arthritis.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>