Types of Services
body {
font-family: 'Arial', sans-serif;
background-color: #f4f7fa;
margin: 0;
padding: 20px;
}
.additionalInfo {
display: flex;
flex-wrap: wrap;
/* Allows items to wrap if there's not enough space */
justify-content: space-between;
/* Adds space between items */
}
.addItem {
text-align: center;
/* Centers the text and image */
margin: 10px;
/* Adds space between each item */
padding-top: 20px;
cursor: pointer;
/* Makes items clickable */
border-radius: 10px;
transition: transform 0.3s ease;
/* Smooth transform (only on the image) */
}
.addItem:hover img {
transform: scale(1.05);
/* Only apply the zoom effect to the image */
}
.addP {
padding-top: 10px;
font-weight: bold;
color: #002246;
font-size: 16px;
transition: none;
/* No transition on text to avoid any motion blur */
}
.text-box {
display: none;
margin-top: 20px;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
border: 1px solid #ddd;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
max-width: 100%;
font-size: 16px;
line-height: 1.6;
color: #333;
font-family: 'Verdana', sans-serif;
}
.about {
font-family: 'Verdana', sans-serif;
font-size: 16px;
text-align: center;
}
.text-box strong {
color: #004892;
/* Color for bold elements */
}
.text-box ul {
list-style-type: disc;
margin-left: 20px;
}
.text-box ul li {
margin-bottom: 5px;
}
.text-box p {
margin-bottom: 15px;
}
/* Style for the new div holding the paragraph items */
.text-row {
display: flex;
justify-content: space-evenly;
/* Distribute the space evenly */
margin-bottom: 20px;
/* Space between the text row and the rest */
}
.text-box-heading {
text-align: center;
font-size: 24px;
font-weight: bold;
color: #004892;
}
.hidden {
display: none;
}
const headings = [
"Transportation",
"Prevention",
"Testing",
"Education and Counseling",
"Treatment",
"Low to No Cost"
];
const texts = [
"Services include
transportation to and from the specified clinic. Some clinics also offer mobile testing, which visits scheduled sites to provide testing. Additionally, there are physicians who travel to patients to conduct tests for individuals, couples, and groups.
Key Points:- Transportation available
- Mobile testing options
- Physicians can travel to you
",
"Prevention services may include treatment options for those already living with HIV to help ensure that they do not transmit disease to others. This column focuses on kits locations provide that may have condoms, dental dams, or even pamphlets that give more information. Education is our #1 defense against the transmission of diseases.
Prevention Services:- Condom Distribution
- PrEP and PEP Prescription
- Free Educational Materials
",
"These Locations Offer Testing for HIV and STDs and whether they accept walk-ins or require appointments. The time in which you receive your results may vary from 15 minutes to 2 weeks depending on where you go.
Testing Options:- HIV Testing
- STD Testing
- Walk-in or Appointment-based
",
"Education from a healthcare provider to a patient regarding HIV care involves:
Understanding HIV: Explaining what HIV is, how it affects the body, and the difference between HIV and AIDS.
Treatment Information: How to take medications properly and the importance of adherence.
Counseling Includes:- Interactive discussions
- Emotional support
- Tailored advice based on situation
",
"HIV prescriptions, such as
PreP & PeP, are distributed and possibly refilled at this location.
Treatment Services Include:- Prescription refills
- PreP & PeP
",
"Most insurances are accepted at this site, resulting in minimal to no cost for patients seeking care, which includes testing or prescription refills. Additionally, programs such as the Ryan White Program may provide free testing, treatment, and other services.
Cost Coverage:- Insurance Accepted
- Minimal to No Cost
- Ryan White Program Available
"
];
function showText(index) {
const textBox = document.getElementById('text-box');
textBox.style.display = 'block';
const heading = document.getElementById('text-box-heading');
heading.innerHTML = headings[index];
const textBoxText = document.getElementById('text-box-text');
textBoxText.innerHTML = texts[index]; // Display HTML content
// hide all gold icons and turn on all blue icons, then turn on the gold icon for the selected item and hide the blue icon for the selected item
const goldIcons = document.querySelectorAll('.gold-icon');
const blueIcons = document.querySelectorAll('.blue-icon');
goldIcons.forEach(icon => icon.classList.add('hidden'));
blueIcons.forEach(icon => icon.classList.remove('hidden'));
document.querySelector(`#item-${index} .gold-icon`).classList.remove('hidden');
document.querySelector(`#item-${index} .blue-icon`).classList.add('hidden');
}
showText(0);
Click the icons below to explore each resource category and learn about the services offered and what
to expect.
