np.1400

مشکل در نصب CSS Responsive Animated Accordion

3 پست در این موضوع قرار دارد

سلام.

این افزونه ای که در لینک زیر قرار داره میخوام نصب کنم ولی نصب نمیشه.

نمیدونم چه کتابخانه ای برای پیشفرض میخواد.

http://codepen.io/chriswrightdesign/pen/cmanI

ممنون

0

به اشتراک گذاری این پست


لینک به پست

سلام.

این افزونه ای که در لینک زیر قرار داره میخوام نصب کنم ولی نصب نمیشه.

نمیدونم چه کتابخانه ای برای پیشفرض میخواد.

http://codepen.io/chriswrightdesign/pen/cmanI

ممنون

با سلام واحترام این ها رو میخواد

http://s.codepen.io/assets/libs/prefixfree.min.js

http://codepen.io/assets/editor/live/css_live_reload_init.js


<style class="cp-pen-styles">@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}[/font]
[font=Consolas, 'Lucida Console', monospace]body {
font-family: 'Lato';
}[/font]
[font=Consolas, 'Lucida Console', monospace]h1 {
font-size: 2em;
padding: 2em;
text-align: center;
}[/font]
[font=Consolas, 'Lucida Console', monospace].accordion dl {
border: 1px solid #ddd;
}
.accordion dl:after {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #2ba659;
}
.accordion dt > a {
text-align: center;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #fff;
-webkit-transition: background-color 0.5s ease-in-out;
}
.accordion dd {
background-color: #eee;
font-size: 1em;
line-height: 1.5em;
}
.accordion dd > p {
padding: 1em 2em 1em 2em;
}[/font]
[font=Consolas, 'Lucida Console', monospace].accordion {
position: relative;
background-color: #eee;
}[/font]
[font=Consolas, 'Lucida Console', monospace].container {
max-width: 960px;
margin: 0 auto;
padding: 2em 0 2em 0;
}[/font]
[font=Consolas, 'Lucida Console', monospace].accordionTitle {
background-color: #38cc70;
border-bottom: 1px solid #30bb64;
}
.accordionTitle:before {
content: "+";
font-size: 1.5em;
line-height: 0.5em;
float: left;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover {
background-color: #2ba659;
}[/font]
[font=Consolas, 'Lucida Console', monospace].accordionTitleActive {
background-color: #2ba659;
}
.accordionTitleActive:before {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
transform: rotate(-225deg);
}[/font]
[font=Consolas, 'Lucida Console', monospace].accordionItem {
height: auto;
overflow: hidden;
}
@media all {
.accordionItem {
max-height: 50em;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
}
@media screen and (min-width: 48em) {
.accordionItem {
max-height: 15em;
-moz-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}[/font]
[font=Consolas, 'Lucida Console', monospace].accordionItemCollapsed {
max-height: 0;
}[/font]
[font=Consolas, 'Lucida Console', monospace].animateIn {
-webkit-animation-name: accordionIn;
-webkit-animation-duration: 0.65s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: normal;
-moz-animation-duration: 0.65s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
-webkit-animation-name: accordionIn;
-webkit-animation-duration: 0.65s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
}[/font]
[font=Consolas, 'Lucida Console', monospace].animateOut {
-webkit-animation-name: accordionOut;
-webkit-animation-duration: 0.75s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: accordionOut;
-moz-animation-duration: 0.75s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
-webkit-animation-name: accordionOut;
-webkit-animation-duration: 0.75s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
}[/font]
[font=Consolas, 'Lucida Console', monospace]@-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes accordionIn {
0% {
opacity: 0;
-moz-transform: scale(0.8);
}
100% {
opacity: 1;
-moz-transform: scale(1);
}
}
@-webkit-keyframes accordionIn {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.8);
}
}
@-moz-keyframes accordionOut {
0% {
opacity: 1;
-moz-transform: scale(1);
}
100% {
opacity: 0;
-moz-transform: scale(0.8);
}
}
@-webkit-keyframes accordionOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}
</style>

2

به اشتراک گذاری این پست


لینک به پست

ممنون از دبیرستان شما ( الان دیگه راهنمایی وجود نداره )

یکپارچش کردم:

accordion.zip

فقط نمیشه انتخابشو radio کرد؟

یعنی یکی باز میشه اون یکی بسته بشه؟

ممنون

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری