tab css click to open and to close with just css

Question

I don't want javascript.

I need when i click on the tab to open and when i click again it will close without javascript just with css please

.tabordion {
  color: #333;
  display: block;
  margin: auto;
  position: relative;
  width: 85%;
}
.tabordion input[name="sections"] {
  position: absolute;
        top: 50px;
}

.tabordion section {
  display: block;
}

.tabordion input[name=sections]:checked~article {
        text-align: center;
    display: block;
    padding-top: 0px !important;
}
.tabordion section label {
        line-height: 1.1;
        display: inline-block;
    padding: 21px 0px;
    border: none;
    font-size: 1.2rem;
    text-align: center;
    color: #fff;
    background-color: #2b6a83;
    -webkit-box-shadow: 0 -2px 0 0 transparent inset;
  cursor: pointer;
  position: relative;
  width: 100%;
  z-index: 99999 !important;
  margin-bottom: 10px;
}

.tabordion section article {
    display: none;
    left: 0px;
    min-width: 300px;
    padding: 30px 30px 20px 21px;
    position: relative;
    top: 0;
}

.tabordion section article:after {
  bottom: 0;
  content: "";
  display: block;
  left:-229px;
  position: absolute;
  top: 0;
  width: 220px;
}
.tabordion input[name=sections] {
    position: absolute;
    display: none 
} label:before,input[name=sections]:checked + label {
    background-color: #f3cb5d;
    color: white;
   font-weight: 800;
}
.tabordion input[name="sections"]:checked ~ article {
  display: block;
    padding-top: 50px;
}
.ime{
    width: 200px;
  overflow: hidden;
  height: 170px;;
    padding: 20px
}

Family Caregivers 
 


Caregiving Strategies Handbook


Alzheimer’s & Dementia 
Alzheimer’s & Dementia



Caring for Someone with Alzheimer's or Dementia
A HANDBOOK FOR CARE
Read More..








Dementia: A Guide for Caregivers
Communicating about dementia with healthcare providers
Read More..








Dementia in Canada Statistics
Demintia in Canada, including Alzheimer's disease
Read More..


COPD 
Chronic Obstructive Pulmonary Disease (COPD)



COPD Handbook
Signs and Symptoms of Chronic Obstructive Pulmonary Disease
Read More..


Stroke 
Stroke



A Guide for Stroke Survivors and Families
A GUIDE FOR STROKE SURVIVORS, FAMILIES, & CAREGIVERS
Read More..


Palliative Care 
Palliative Care



A Caregiver's Guide to the Dying Process
“Dying is not primarily a medical condition, but a personally experienced, lived condition.”
Read More..








Guiding Family Caregivers through End of Life Care
Why Do Family Caregivers Needs To Be Guided To Take Care Of Themselves?
Read More..


Respite Care 
Respite Care



Respite Care Guide
Finding What’s Best for You. Respite refers to a short time of rest or relief.
Read More..


Postpartum Care 
Postpartum Care



Your Guide to Postpartum Care
The first 6 weeks after birth is known as the postpartum period.
Read More..








Postpartum Care in Canada
The postpartum period is a significant time for the mother, baby, partner, and family.
Read More..


Hospital Discharge Guide 
Hospital Discharge



Hospital Discharge Guid
In the Hospital: Planning for Discharge, Know Who Is on the Discharge Team
Read More..

Pat Dobson · Accepted Answer

Have a look at the HTML tag 'details':

w3schools - details

This is basically an HTML only accordion tag...

tab css click to open and to close with just css

Answers (2)

Related Questions