رفتن به مطلب

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


پست های پیشنهاد شده

سلام.

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

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

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

ممنون

لینک به ارسال

سلام.

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

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

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>

لینک به ارسال

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

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

accordion.zip

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

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

ممنون

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...