I have code below for a pure CSS accordion list. I was wondering if its possible to have the text under the heading sort of fly in like the example here: http://codepen.io/pirrera/pen/KwzMGZ ,but using pure CSS only? Anything helps, cheers.
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #005bab;
overflow: hidden;
}
.input {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
position: relative;
text-align:center;
display: block;
padding: 0 0 0 1em;
background: #e2ecf6;
font-size:14px;
font-family:Verdana;
font-weight: bold;
line-height: 6;
cursor: pointer;
}
.tab-content {
max-height: 0;
overflow: hidden;
background: #f4f8fc;
-webkit-transition: max-height .5s;
-o-transition: max-height .5s;
transition: max-height .5s;
}
.tab-content p {
margin: 1em;
}
/* :checked */
.input:checked ~ .tab-content {
max-height: 10em;
}
/* Icon */
.label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.input[type=checkbox] + .label::after {
content: "+";
}
.input[type=radio] + .label::after {
content: "";
}
.input[type=checkbox]:checked + .label::after {
transform: rotate(315deg);
}
.input[type=radio]:checked + .label::after {
transform: rotateX(180deg);
}
.bottombar{
content: "";
display:block;
height:1em;
width:100%;
background-color:#00688B;
}
<div class="wrapper">
<div class="tab">
<input name="tabs" class="input" id="tab-one" type="checkbox"/>
<label class="label" for="tab-one">Label One</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-two" type="checkbox"/>
<label class="label" for="tab-two">Label Two</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-three" type="checkbox"/>
<label class="label" for="tab-three">Label Three</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="bottombar"></div>
</div>
You can animate the scale of the paragraph when checkbox is checked
.input:checked~.tab-content p {
transform: scale(1);
}
see code below:
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #005bab;
overflow: hidden;
}
.input {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
position: relative;
text-align: center;
display: block;
padding: 0 0 0 1em;
background: #e2ecf6;
font-size: 14px;
font-family: Verdana;
font-weight: bold;
line-height: 6;
cursor: pointer;
}
.tab-content {
max-height: 0;
overflow: hidden;
padding: 0px;
-webkit-transition: max-height .5s;
-o-transition: max-height .5s;
transition: max-height .5s;
padding-left: 20px;
background: #c3d7ea;
}
.tab-content .container {
padding: 1em;
margin: 0;
transform: scale(0.6);
-webkit-transition: transform .5s;
-o-transition: transform .5s;
transition: transform .5s;
background: #f4f8fc;
}
/* :checked */
.input:checked~.tab-content {
max-height: 10em;
}
.input:checked~.tab-content .container {
transform: scale(1);
}
/* Icon */
.label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.input[type=checkbox]+.label::after {
content: "+";
}
.input[type=radio]+.label::after {
content: "";
}
.input[type=checkbox]:checked+.label::after {
transform: rotate(315deg);
}
.input[type=radio]:checked+.label::after {
transform: rotateX(180deg);
}
.bottombar {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #00688B;
}
<div class="wrapper">
<div class="tab">
<input name="tabs" class="input" id="tab-one" type="checkbox" />
<label class="label" for="tab-one">Label One</label>
<div class="tab-content">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
<div>this is another div</div>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-two" type="checkbox" />
<label class="label" for="tab-two">Label Two</label>
<div class="tab-content">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-three" type="checkbox" />
<label class="label" for="tab-three">Label Three</label>
<div class="tab-content">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>
<div class="bottombar"></div>
</div>
Yeah, you can shrink the content using transform: scale() and hide it using opacity: 0, then transition those to normal values when the label/input are :checked
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #005bab;
overflow: hidden;
}
.input {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
position: relative;
text-align: center;
display: block;
padding: 0 0 0 1em;
background: #e2ecf6;
font-size: 14px;
font-family: Verdana;
font-weight: bold;
line-height: 6;
cursor: pointer;
}
.tab-content {
max-height: 0;
overflow: hidden;
background: white;
}
.tab-content p {
padding: 1em;
margin: 0 0 0 2em;
background: #f4f8fc;
}
/* :checked */
.input:checked ~ .tab-content {
max-height: 10em;
}
/* Icon */
.label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
transition: all .35s;
}
.input[type=checkbox] + .label::after {
content: "+";
}
.input[type=radio] + .label::after {
content: "";
}
.input[type=checkbox]:checked + .label::after {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.input[type=radio]:checked + .label::after {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.bottombar {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #00688B;
}
.tab-content {
transform: scale(0.5);
opacity: 0;
transition: transform .5s, opacity .5s, -webkit-transform .5s, max-height .5s;
}
input:checked ~ .tab-content {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
<div class="wrapper">
<div class="tab">
<input name="tabs" class="input" id="tab-one" type="checkbox"/>
<label class="label" for="tab-one">Label One</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-two" type="checkbox"/>
<label class="label" for="tab-two">Label Two</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-three" type="checkbox"/>
<label class="label" for="tab-three">Label Three</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="bottombar"></div>
</div>
Use transform: scale() to "grow"/"shrink" the content, and transition for the effect.
Pen: https://codepen.io/kjkta/pen/MmLewZ
I've added:
.tab-content {
transition: .5s transform;
transform: scale(.1);
}
.input:checked ~ .tab-content {
transform: scale(1);
}
EDITED
This is a simple and functional example: However, you can't simulate an "onclick" event with css. You also can check this post for more clarification: Can I have an onclick effect in CSS?
If you do not mind having a little bit of pure JavaScript in your code, see this example:
https://jsfiddle.net/8xs83phb/
If you want an "hover" event based accordion, see the below code.
ul {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
}
h2 {
margin: 0;
text-align: center;
font: normal 22px Arial, Verdana;
}
.box {
width: 200px;
max-height: 40px;
padding: 10px 0;
background: #fdfdfd;
box-sizing: border-box;
overflow: hidden;
cursor: pointer;
border-bottom: 1px solid black;
transition: all 0.5s;
}
.box:hover {
max-height: 300px;
}
<ul>
<li>
<div class='box'>
<h2>Item One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</li>
<li>
<div class='box'>
<h2>Item Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</li>
<li>
<div class='box'>
<h2>Item Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</li>
</ul>
Related
&__img{
height: 100%;
transform:translate(-4rem) scale(1.4)
}
&__caption{
position: absolute;
top: 50%;
left:50%;
font-size: 1.6rem;
color:#f7f7f7;
text-align: center;
text-transform: uppercase;
transform: translate(-50% ,20%);
opacity: 0;
transition: all .5s;
backface-visibility: hidden;
}
&:hover &__caption{
opacity: 1;
transform: translate(-50%,-50%);
}
&:hover &__img{
}
<div class="row">
<div class="story">
<figure class="story__shape">
<figure-caption class="story__caption">
mary smith
</figure-caption>
<img src="img/nat-8.jpg" alt="Customer Profile" class="story__img">
</figure>
<div class="story__text">
<h3 class="heading-teritiary u-margin-bottom-small">I have best weekend </h3>
<p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem incidunt illo harum nam. Nesciunt dolores commodi aliquid, asperiores animi quo illum impedit itaque in optio iure, totam, illo ipsum tempore.</p>
</div>
</div>
</div>
The hover effect is not applied. It hides the caption and the text. When I hover it is supposed to show them.
Also the scale doesn't change. I can't figure out what is happening.
I made an accordion menu using HTML and CSS but I am facing an issue:
I am able to close the menus with the '-' button, but one will always remain open.
How do I make it so I can close all questions if I need too (and also if I choose to open two questions, or even all three at the same time)?
Thank you.
.wizard-faq-section {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
}
.faq-container {
width: 100%;
margin: 0 auto;
max-width: 30em;
}
.accordion-link {
font-size: 0.875rem;
font-weight: 600;
border: 1px solid #f3f4f6;
border-radius: 4px;
margin-bottom: 0.9em;
padding: 0.5em 0 0.5em 2em;
text-decoration: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-link:focus {
background-color: #f3f4f6;
}
.accordion-link:hover {
color: #1468a0;
}
.accordion-link span {
color: #6366f1;
padding: .5rem;
}
.accordion-icon-remove {
display: none;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 650ms;
}
.faq-answer::before {
content: "";
position: absolute;
width: .6rem;
height: 90%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.faq-answer p {
font-size: 0.875rem;
padding-left: 2em;
color: #6b7280
}
.accordion-item:target .faq-answer {
max-height: 20rem;
}
.accordion-item:target .accordion-link .accordion-icon-add {
display: none;
}
.accordion-item:target .accordion-link .accordion-icon-remove {
display: block;
}
<section class="wizard-faq-section">
<div class="faq-container">
<div class="faq-accordion">
<div class="accordion-item" id="faq-item-1">
<a class="accordion-link" href="#faq-item-1">
Q1
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa corrupti magni praesentium velit quo eum unde, accusamus dolorum cum eligendi!</p>
</div>
</div>
<div class="accordion-item" id="faq-item-2">
<a class="accordion-link" href="#faq-item-2">
Q2
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate cum laborum voluptates mollitia suscipit dicta ut temporibus. Nostrum provident dolorem, voluptatem sunt veniam maxime animi. Quisquam sit repudiandae reiciendis illo iusto nostrum harum, eius laudantium quidem et saepe provident doloremque blanditiis magni tenetur nulla autem eum, nemo veritatis? Itaque.</p>
</div>
</div>
<div class="accordion-item" id="faq-item-3">
<a class="accordion-link" href="#faq-item-3">
Q3
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quis, pariatur nesciunt quaerat alias aspernatur laudantium eaque sapiente veritatis nobis reiciendis adipisci, beatae aliquam dicta illum consectetur, reprehenderit quisquam non ad eum laboriosam illo eligendi ipsam quia. Hic, commodi eum!</p>
</div>
</div>
</div>
</div>
</section>
There are many things over.
First, you have not used js and expecting more from css
I have made it work by using JavaScript and toggle of classes, of active/clicked item
Snippet:
document.querySelectorAll(".accordion-link").forEach(function(item) {
item.onclick = function() {
if (!(document.querySelector(".accordion-link.clicked") == null) && !(document.querySelector(".accordion-link.clicked") == item)) {
document.querySelector(".accordion-link.clicked").classList.toggle("clicked");
}
document.activeElement.classList.toggle("clicked");
};
});
.wizard-faq-section {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
}
.faq-container {
width: 100%;
margin: 0 auto;
max-width: 30em;
}
.accordion-link {
font-size: 0.875rem;
font-weight: 600;
border: 1px solid #f3f4f6;
border-radius: 4px;
margin-bottom: 0.9em;
padding: 0.5em 0 0.5em 2em;
text-decoration: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-link.clicked {
background-color: #f3f4f6;
}
.accordion-link:hover {
color: #1468a0;
}
.accordion-link span {
color: #6366f1;
padding: .5rem;
}
.accordion-icon-remove {
display: none;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 650ms;
}
.faq-answer::before {
content: "";
position: absolute;
width: .6rem;
height: 90%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.faq-answer p {
font-size: 0.875rem;
padding-left: 2em;
color: #6b7280
}
.clicked+.faq-answer {
max-height: 20rem;
}
.clicked .accordion-icon-add {
display: none;
}
.clicked .accordion-icon-remove {
display: block;
}
<section class="wizard-faq-section">
<div class="faq-container">
<div class="faq-accordion">
<div class="accordion-item" id="faq-item-1">
<a class="accordion-link" href="#faq-item-1">
Q1
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa corrupti magni praesentium velit quo eum unde, accusamus dolorum cum eligendi!</p>
</div>
</div>
<div class="accordion-item" id="faq-item-2">
<a class="accordion-link" href="#faq-item-2">
Q2
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate cum laborum voluptates mollitia suscipit dicta ut temporibus. Nostrum provident dolorem, voluptatem sunt veniam maxime animi. Quisquam sit repudiandae reiciendis illo iusto
nostrum harum, eius laudantium quidem et saepe provident doloremque blanditiis magni tenetur nulla autem eum, nemo veritatis? Itaque.</p>
</div>
</div>
<div class="accordion-item" id="faq-item-3">
<a class="accordion-link" href="#faq-item-3">
Q3
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quis, pariatur nesciunt quaerat alias aspernatur laudantium eaque sapiente veritatis nobis reiciendis adipisci, beatae aliquam dicta illum consectetur, reprehenderit quisquam non
ad eum laboriosam illo eligendi ipsam quia. Hic, commodi eum!</p>
</div>
</div>
</div>
</div>
</section>
Website: http://www.asia-hr.com > Home > Team > click on any faces
On my team section, when you click on a face, the bio is popping up. However, I am facing two problems:
1) It's going down very far on click, I would like to be more centered on the picture and bio.
2) I would like to have a slower transition
Do you have any ideas of what can be the issue and how can I fix it?
CSS:
.team-section{
overflow:hidden;
text-align:center;
background: #34495e;
padding: 60px;
}
.team-section h2{
color: white;
}
.ps{
margin-bottom: 40px;
}
.team-section .ps .p{
width: 250px;
height: 250px;
overflow:hidden;
border-radius: 50%;
margin: 0 30px;
display:inline-block;
-webkit-border-radius: 50%;
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}
.team-section .ps .p img{
height: 100%;
min-width: 100%;
left: 50%;
position: relative;
transform: translateX(-50%);
filter:grayscale(100%);
transition: 0.5s all;
}
.team-section .ps .p img:hover{
filter: none;
}
.team-section .section{
width:600px;
margin:auto;
font-size: 20px;
color:white;
text-align: justify;
height: 0;
overflow: hidden;
}
.team-section .section:target{
height: auto;
}
.team-section .name{
display:block;
font-size: 22px;
text-align: center;
}
.stop-scrolling {
height: 100%;
overflow: hidden;
}
HTML
<div class="team-section">
<h2>Our Team</h2>
<span class="border border-1"></span>
<div class="ps">
<div class="p">
<img src="./images/home/h1.jpg">
</div>
<div class="p">
<img src="./images/home/h2.jpg">
</div>
<div class="p">
<img src="./images/home/h3.jpg">
</div>
</div>
<div class="section" id="p1">
<span class="name">Sophia Letana</span>
<span class="border border-1"></span>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
</div>
<div class="section" id="p2">
<span class="name">Francois Le Chene</span>
<span class="border border-1"></span>
<p>gh ghgh ghg sit, amet consectetur ghgh elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
</div>
<div class="section" id="p3">
<span class="name">Steve Mansoa</span>
<span class="border border-1"></span>
<p>Lghgh ipsum gh sit, amet consectetur adipisicing elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
</div>
</div>
When I hover the content, I only want the image to be displayed and the content/text hidden. My code shows here that when I hover the content, the image is visible but the content is also displayed. I tried searching for solutions for this problem but
unfortunately, I didn't see any similar problems like this one.
.section-four {
display: flex;
justify-content: center;
height: 100vh;
}
.menu-one {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
}
.menu-content {
position: absolute;
width: 100%;
}
.menu-one:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
max-height: 100%;
background-repeat: no-repeat;
}
.menu-two {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
left: 5em;
}
.menu-two:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
background-repeat: no-repeat;
max-height: 100%;
}
<section class="section-four">
<div class="menu-one">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
<div class="menu-two">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
</section>
You can hide the content with:
.menu-one:hover > div.menu-content,
.menu-two:hover > div.menu-content {
display: none;
}
Example:
.section-four {
display: flex;
justify-content: center;
height: 100vh;
}
.menu-one {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
}
.menu-content {
position: absolute;
width: 100%;
}
.menu-one:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
max-height: 100%;
background-repeat: no-repeat;
}
.menu-two {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
left: 5em;
}
.menu-two:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
background-repeat: no-repeat;
max-height: 100%;
}
.menu-one:hover>div.menu-content,
.menu-two:hover>div.menu-content {
display: none;
}
<section class="section-four">
<div class="menu-one">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
<div class="menu-two">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
</section>
add a child selector to the :hover stated and hide it as you please
.section-four {
display: flex;
justify-content: center;
height: 100vh;
}
.menu-one {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
}
.menu-content {
position: absolute;
width: 100%;
}
.menu-one:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
max-height: 100%;
background-repeat: no-repeat;
}
.menu-one:hover > .menu-content{
opacity:0; transition:opacity 500ms ease;
}
.menu-two {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
left: 5em;
}
.menu-two:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
background-repeat: no-repeat;
max-height: 100%;
}
.menu-two:hover > .menu-content{
opacity:0; transition:opacity 500ms ease;
}
<section class="section-four">
<div class="menu-one">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
<div class="menu-two">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
</section>
In the link you can see that I'm using a CSS rule - "direction: rtl;".
All I'm trying to do is to move the plus(the one with the red border around it) to the left side of the tabs.
The labels are fine but it seems I having hard time to move checkbox to the other side.
I tried to change it's position also tried to float it to the left but it didn't worked.
Does someone have an idea how can I achieve that?
body{
direction: rtl;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #fff;
overflow: hidden;
}
input[type=checkbox]{
position: absolute;
opacity: 0;
z-index: -1;
}
.tab-content {
max-height: 0;
overflow: hidden;
background: #1abc9c;
transition: max-height .35s;
}
.tab-content p {
margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
max-height: 10em;
}
/* Icon */
label::after {
position: absolute;
right: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
transition: all .35s;
}
input[type=checkbox] + label::after {
content: "+";
border: 1px solid #f00;
}
input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}
input[type=checkbox] + label {
position: relative;
display: block;
padding: 0 0 0 1em;
background: #16a085;
font-weight: bold;
line-height: 3;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="half">
<p>Open <strong>multiple</strong></p>
<div class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">Label One</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input id="tab-two" type="checkbox" name="tabs">
<label for="tab-two">Label Two</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input id="tab-three" type="checkbox" name="tabs">
<label for="tab-three">Label Three</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>
</body>
</html>
Change right:0 to left:0 for label::after
body{
direction: rtl;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #fff;
overflow: hidden;
}
input[type=checkbox]{
position: absolute;
opacity: 0;
z-index: -1;
}
.tab-content {
max-height: 0;
overflow: hidden;
background: #1abc9c;
transition: max-height .35s;
}
.tab-content p {
margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
max-height: 10em;
}
/* Icon */
label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
transition: all .35s;
}
input[type=checkbox] + label::after {
content: "+";
border: 1px solid #f00;
}
input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}
input[type=checkbox] + label {
position: relative;
display: block;
padding: 0 0 0 1em;
background: #16a085;
font-weight: bold;
line-height: 3;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="half">
<p>Open <strong>multiple</strong></p>
<div class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">Label One</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input id="tab-two" type="checkbox" name="tabs">
<label for="tab-two">Label Two</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input id="tab-three" type="checkbox" name="tabs">
<label for="tab-three">Label Three</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>
</body>
</html>
change label::after { right:0} to label::after { left:0}
its work
body {
direction: rtl;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #fff;
overflow: hidden;
}
input[type=checkbox] {
position: absolute;
opacity: 0;
z-index: -1;
}
.tab-content {
max-height: 0;
overflow: hidden;
background: #1abc9c;
transition: max-height .35s;
}
.tab-content p {
margin: 1em;
}
/* :checked */
input:checked~.tab-content {
max-height: 10em;
}
/* Icon */
label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
transition: all .35s;
}
input[type=checkbox]+label::after {
content: "+";
border: 1px solid #f00;
}
input[type=checkbox]:checked+label::after {
transform: rotate(315deg);
}
input[type=checkbox]+label {
position: relative;
display: block;
padding: 0 0 0 1em;
background: #16a085;
font-weight: bold;
line-height: 3;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="half">
<p>Open <strong>multiple</strong></p>
<div class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">Label One</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input id="tab-two" type="checkbox" name="tabs">
<label for="tab-two">Label Two</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input id="tab-three" type="checkbox" name="tabs">
<label for="tab-three">Label Three</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>
</body>
</html>