Jump to content
Invision Community

Спойлер с названием


 Share

Description

Хотите спойлер с названием? Не знаете как сделать? Читайте эту статью.

Это в пост в HTML

 

<section class="ac-container">
	<div>
		<input id="ac-1" name="accordion-1" type="checkbox"><label for="ac-1">1 ГЛАВА</label>

		<article>
			Содержимое спойлера
		</article>
	</div>

	<div>

 

Это в Custom css

 

.ac-container{
   /* width: 400px;
    margin: 10px auto 30px auto;*/
}

.ac-container label{
    font-family: 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    margin: 3px;
    border-radius: 5px;
    position: relative;
    z-index: 20;
    display: block;
    height: 50px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 3 !important;
    font-size: 19px;
      background-color: #80898f4a;
   /* background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);*/
}
}

.ac-container label:hover{
    background: #fff;
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: #00000026;
    color: #80898f;
    font-weight: 600;
    font-size: 14px;
    border-radius: 5px;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(http://netcribe.com/example/arrow_down.png) no-repeat center center;  
}

.ac-container input:checked + label:hover:after {
    background-image: url(http://netcribe.com/example/arrow_up.png);
}

.ac-container input{
    display: none;
}

.ac-container article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    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 input:checked ~ article {
     -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;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
    height: auto;
}

.ac-container article p{
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

 

Custom css темный стиль

 

.ac-container{
   /* width: 400px;
    margin: 10px auto 30px auto;*/
}

.ac-container label{
    font-family: 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    margin: 3px;
    border-radius: 5px;
    position: relative;
    z-index: 20;
    display: block;
    height: 50px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 3 !important;
    font-size: 19px;
      background-color: #80898f4a;
   /* background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);*/
}
}

.ac-container label:hover{
    background: #fff;
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: #00000026;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 5px;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(http://netcribe.com/example/arrow_down.png) no-repeat center center;  
}

.ac-container input:checked + label:hover:after {
    background-image: url(http://netcribe.com/example/arrow_up.png);
}

.ac-container input{
    display: none;
}

.ac-container article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    padding-left: 25px;

    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 input:checked ~ article {
     -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;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
    height: auto;
}

.ac-container article p{
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

Безымянный.png

Безымянный1.png

Безымянный.jpg

Безымянный1.jpg

  • Like 1
  • Спасибо 1
 Share


User Feedback

Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Privacy Policy We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.