Я пытаюсь создать довольно простое css - только аккордеонное меню. Все работает правильно, но я не могу заставить активную статью закрываться при нажатии, не нарушая остальную часть кода. Мне бы хотелось, чтобы меню открывало скрытый элемент при нажатии на метку, а затем закрывалось либо при нажатии на ту же метку, либо при нажатии на другую метку, поэтому эффект переключения.
Мой код:
.ac-container {
width: 100%;
max-width: none;
color: peru;
width: 100%;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label {
height: 50px !important;
line-height: 2 !important;
font-size: 36px !important;
font-family: 'Roboto','Arial Narrow',Arial,sans-serif !important;
font-weight: 300;
text-align: center;
padding: 5px 20px;
/*position: relative;
z-index: 20;*/
display: block;
height: 30px;
cursor: pointer;
color: #777;
}
.ac-container label:hover {
color: peru;
}
.ac-container input:checked + label,.ac-container input:checked + label:hover {
background: #f1f2f3;
color: peru;
height: 30px;
line-height: 21px;
font-size: 13px;
}
.ac-container label:hover:after,.ac-container input:checked + label:hover:after {
content: '';
/*position: absolute;*/
width: 24px;
height: 24px;
right: 13px;
top: 7px;
}
.ac-container input:checked + label:hover:after {
background-image: url(../images/arrow_up.png);
}
.ac-container input {
display: none;
}
.ac-container article {
background: rgba(255,255,255,0.4);
margin: 20px auto 0 auto;
width: 100%;
overflow: hidden;
height: 0;
/*position: relative;
z-index: 10;*/
-webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
}
.ac-container article p {
font-style: normal;
color: #777;
line-height: 23px;
font-size: 120%;
padding: 20px 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.ac-container input:checked ~ article {
-webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
}
.ac-container input:checked ~ article.ac-small {
height: 200px;
}
.ac-container input:checked ~ article.ac-medium {
height: 600px;
}
.ac-container input:checked ~ article.ac-large {
height: 1050px;
}
HTML:
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="radio">
<label for="ac-1">About us</label>
<article class="ac-medium">
<div class="container-fluid">
<div class="container text-left padtop">
<div class="row">
<div class="col-md-3">
<h2><strong>Consult</strong></h2>
Meet with our talented team.
</div>
<div class="col-md-3">
<h2><b>Design</b></h2>
Work through the creative design process.
</div>
<div class="col-md-3">
<h2><b>Build</b></h2>
Our craftsmen get to work producing your top quality kitchen componentry.
</div>
<div class="col-md-3">
<h2><b>Install</b></h2>
Our experienced installers bring your new kitchen to life.
</div>
</div><br>
<div class="row">
<div class="col-md-6"><img class="img-fluid" src="/concrete5/files/9615/8548/4357/factory.jpg" alt="factory.jpg" width="600" height="399" /></div>
<div class="col-md-6"><img class="img-fluid" src="/concrete5/files/3415/8548/4408/kitchenfinished.jpg" alt="kitchenfinished.jpg" width="600" height="399" /></div>
</div>
</div>
</div>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio">
<label for="ac-2">Our Staff</label>
<article class="ac-medium">
<p><div class="container text-left">
<h2>Designing a new kitchen is a process.</h2>
<p>Firstly it’s important that we find out a little about you. We need to know what you expect and want from a kitchen. Have you got pets that spend time inside? Are you left or right handed? Do you like to entertain and if so for how many guests? Do you have young children or teenagers? How often do you use your microwave and for what?</p> </p>
<div class="row">
<div class="col-md-3">
<img class="img-fluid" src="/concrete5/themes/LEEBROS/img/head.jpg">
<h2>Paul Ingram</h2>
Owner
</div>
<div class="col-md-3">
<img class="img-fluid" src="/concrete5/themes/LEEBROS/img/head1.jpg">
<h2>Sally Army</h2>
Kitchen Designer
</div>
<div class="col-md-3">
<img class="img-fluid" src="/concrete5/themes/LEEBROS/img/head2.jpg">
<h2>Polly Neshan</h2>
Kitchen Designer
</div>
<div class="col-md-3">
<img class="img-fluid" src="/concrete5/themes/LEEBROS/img/head3.jpg">
<h2>Dan Druff</h2>
Kitchen Designer
</div>
</div>
</div>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="radio">
<label for="ac-3">Kitchens</label>
<article class="ac-large">
<p><div class="container text-left">
<h1>Tailored to your Lifestyle</h1>
<p>From a basic kitchen for a rental property or sleepout to a modern luxury entertainers dream kitchen. And everything in between. Every kitchen we produce is unique and tailored to suit each client’s needs and budget. <br />The range of hardware, storage solutions, design ideas and styles, and material choices is immense. At Lee Bothers Kitchens we can design, manufacture, co-ordinate, and install your complete kitchen project. We can take care of as much or as little as you like including a full design service and arranging sub trades such as electricians and plumbers.</p> <br><br>
<div class="container top50">
<div class="slider-wrapper theme-default" id="slider-wrapper-57">
<div id="nivo-slider-57" class="nivoSlider" style="width: 100% !important;">
<img src="/concrete5/files/9715/8548/2678/kitchen-slide1.jpg" alt="kitchen-slide1.jpg" title="Kitchen 1" data-thumb="/concrete5/files/9715/8548/2678/kitchen-slide1.jpg" ><img src="/concrete5/files/9815/8526/6252/kitchen-slide2.jpg" alt="kitchen-slide2.jpg" title="Kitchen 2" data-thumb="/concrete5/files/9815/8526/6252/kitchen-slide2.jpg" ><img src="/concrete5/files/6715/8526/6252/kitchen-slide3.jpg" alt="kitchen-slide3.jpg" title="Kitchen 3" data-thumb="/concrete5/files/6715/8526/6252/kitchen-slide3.jpg" > </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#nivo-slider-57').nivoSlider({
effect: 'fold', slices: 15, boxCols: 8, boxRows: 4, animSpeed: 500, pauseTime: 3000, startSlide: 0, directionNav: 1, controlNav: 1, controlNavThumbs: 0, pauseOnHover: 1, manualAdvance: 0, prevText: 'Prev', nextText: 'Next', randomStart: 0 });
});
</script>
</div>
</div>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="radio">
<label for="ac-4">Benchtops</label>
<article class="ac-large">
<p><div class="container text-left pad20">
<h2>Stylish Surfaces</h2>
<p>Whether your taste is stainless steel, concrete, marble or timber, we can fashion whatever material to create the ideal work surface that will add class to any kitchen.</p> </p>
<br><br>
<div class="container top20">
<div class="slider-wrapper theme-default" id="slider-wrapper-77">
<div id="nivo-slider-77" class="nivoSlider" style="width: 100% !important;">
<img src="/concrete5/files/9015/8555/0041/bench1.jpg" alt="bench1.jpg" title="Benchtop 1" data-thumb="/concrete5/files/9015/8555/0041/bench1.jpg" ><img src="/concrete5/files/9915/8555/0040/bench2.jpg" alt="bench2.jpg" title="Benchtop 2" data-thumb="/concrete5/files/9915/8555/0040/bench2.jpg" ><img src="/concrete5/files/7115/8555/0040/bench3.jpg" alt="bench3.jpg" title="Benchtop 3" data-thumb="/concrete5/files/7115/8555/0040/bench3.jpg" > </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#nivo-slider-77').nivoSlider({
effect: 'fade', slices: 15, boxCols: 8, boxRows: 4, animSpeed: 500, pauseTime: 3000, startSlide: 0, directionNav: 1, controlNav: 1, controlNavThumbs: 0, pauseOnHover: 1, manualAdvance: 0, prevText: 'Prev', nextText: 'Next', randomStart: 0 });
});
</script>
</div>
</div>
</p>
</article>
</div>
<div>
<input id="ac-5" name="accordion-1" type="radio">
<label for="ac-5">Storage Systems</label>
<article class="ac-large">
<p><div class="container text-left">
<h2>Get Organised with our Clever Solutions</h2>
<p>A fresh, modern storage area can lift up a tired room and give you more space to move and live.</p> </p>
<br><br>
<div class="container top20">
<div class="slider-wrapper theme-default" id="slider-wrapper-75">
<div id="nivo-slider-75" class="nivoSlider" style="width: 100% !important;">
<img src="/concrete5/files/6615/8555/0328/wardrobe1.jpg" alt="wardrobe1.jpg" title="Wardrobe 1" data-thumb="/concrete5/files/6615/8555/0328/wardrobe1.jpg" ><img src="/concrete5/files/9415/8555/0328/wardrobe2.jpg" alt="wardrobe2.jpg" title="Wardrobe 2" data-thumb="/concrete5/files/9415/8555/0328/wardrobe2.jpg" > </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#nivo-slider-75').nivoSlider({
effect: 'fade', slices: 15, boxCols: 8, boxRows: 4, animSpeed: 500, pauseTime: 3000, startSlide: 0, directionNav: 1, controlNav: 1, controlNavThumbs: 0, pauseOnHover: 1, manualAdvance: 0, prevText: 'Prev', nextText: 'Next', randomStart: 0 });
});
</script>
</div>
</div>
</p>
</article>
</div>
<br>
<div class="text-center">
<h1><a style="color: #fff" class="btn btn-warning" href="/concrete5/index.php/contact">Contact Us</a></h1>
</div>
</section>
Есть предложения, пожалуйста?