Форум

Castromen · #1 (**permalink**) 23.11.2015, 19:34

Добрый вечер, помогите переписать аккордеон.
Сейчас аккордеон работает при наведение мышки, а хотелось бы что бы при клике на полоску.

/* Формируем блок аккордеона */
.accordion {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    overflow: hidden;
}
/* список аккордеона */
.accordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
}
.accordion>ul>li {
    display:block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    height:36px;
/* задержка перехода при раскрытии */
    transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    -webkit-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
}
/* оформляем пункты */
.accordion>ul>li>h3 {
    display:block;
    margin: 0 auto;
    padding:7px 20px;  
    color: #068306;
    text-decoration: none;
	font-size:13pt;
    text-shadow: 1px 1px #fff;
    text-transform:uppercase;
    background: #c9c9c9;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #d3d3d3;
/* градиент */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f0f0f0', endColorstr = '#c9c9c9')";
    background-image: -moz-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: -ms-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: -o-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), to(#c9c9c9));
    background-image: -webkit-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: linear-gradient(top, #f0f0f0, #c9c9c9);
/* анимируем заголовок */
   -o-transition: padding-left 250ms ease-out;
   -webkit-transition: padding-left 250ms ease-out;
   -moz-transition: padding-left 250ms ease-out;
}
/* блок с содержанием */
.accordion>ul>li>div {
    background-color: hsla(110, 84%, 30%, 0.65);
    margin: 0 auto;
    padding:10px;
    color: #555;
    font-size: 13pt;
    height: 100%;
}
.accordion>ul>li:active {
    height: 280px;
}
/* пункты аккордеона при наведении */
.accordion:hover>ul>li:active>h3 {
    /* оформляем пункты при наведении */
    color: #068306;
    background: #d3d3d3;
    cursor:pointer;
    /* градиент */
    background-image: -moz-linear-gradient( top, #d3d3d3, #efefef);
    background-image: -ms-linear-gradient( top, #d3d3d3, #efefef);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#efefef));
    background-image: -o-linear-gradient(#dbdbdb, #e6e6e6); /* Opera */
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#d3d3d3', endColorstr='#efefef')"; /* IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr= '#d3d3d3', endColorstr= '#efefef')";   /* IE 8 */
/* подвижная ссылка */
   padding-left: 30px;
}
/* параграфы внутри аккордеона */
.accordion p { margin: 0 0 10px }
/* миниатюры изображений */
.accordion img{ width: 25%; height: auto}



<div class="accordion">
    <ul>
        <li>
            <h3>Закладка - </h3>

      </li>
  </ul>
</div>

Спасибо

рони · #2 (**permalink**) 23.11.2015, 19:53

Castromen,
@keyframes через jquery
там строка 74 тут строки 62 и 66 внести нужные изменения

Castromen · #3 (**permalink**) 23.11.2015, 20:55

рони · #4 (**permalink**) 23.11.2015, 20:57

Castromen,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <script src="https://code.jquery.com/jquery-1.11.3.min.js">
</script>
  <script>
$(function () {
       var div = $('.accordion>ul>li');
       div.click(function(){
             div.toggleClass('active')
             });
  });
  </script>
  <style type="text/css">
 /* Формируем блок аккордеона */
.accordion {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    overflow: hidden;
}
/* список аккордеона */
.accordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
}
.accordion>ul>li {
    display:block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    height:36px;
/* задержка перехода при раскрытии */
    transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    -webkit-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
}
/* оформляем пункты */
.accordion>ul>li>h3 {
    display:block;
    margin: 0 auto;
    padding:7px 20px;
    color: #068306;
    text-decoration: none;
	font-size:13pt;
    text-shadow: 1px 1px #fff;
    text-transform:uppercase;
    background: #c9c9c9;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #d3d3d3;
/* градиент */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f0f0f0', endColorstr = '#c9c9c9')";
    background-image: -moz-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: -ms-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: -o-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), to(#c9c9c9));
    background-image: -webkit-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: linear-gradient(top, #f0f0f0, #c9c9c9);
/* анимируем заголовок */
   -o-transition: padding-left 250ms ease-out;
   -webkit-transition: padding-left 250ms ease-out;
   -moz-transition: padding-left 250ms ease-out;
}
/* блок с содержанием */
.accordion>ul>li>div {
    background-color: hsla(110, 84%, 30%, 0.65);
    margin: 0 auto;
    padding:10px;
    color: #555;
    font-size: 13pt;
    height: 100%;
}
.accordion>ul>li.active {
    height: 280px;
}
/* пункты аккордеона при наведении */
.accordion>ul>li.active>h3 {
    /* оформляем пункты при наведении */
    color: #068306;
    background: #d3d3d3;
    cursor:pointer;
    /* градиент */
    background-image: -moz-linear-gradient( top, #d3d3d3, #efefef);
    background-image: -ms-linear-gradient( top, #d3d3d3, #efefef);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#efefef));
    background-image: -o-linear-gradient(#dbdbdb, #e6e6e6); /* Opera */
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#d3d3d3', endColorstr='#efefef')"; /* IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr= '#d3d3d3', endColorstr= '#efefef')";   /* IE 8 */
/* подвижная ссылка */
   padding-left: 30px;
}
/* параграфы внутри аккордеона */
.accordion p { margin: 0 0 10px }
/* миниатюры изображений */
.accordion img{ width: 25%; height: auto}


  </style>
</head>

<body>
<div class="accordion">
    <ul>
        <li>
            <h3>Закладка - </h3>

      </li>
  </ul>
</div>

</body>

</html>

Castromen · #5 (**permalink**) 24.11.2015, 10:54

рони, спасибо огромное.
Теперь если несколько закладок то все сразу открываются, а хотелось бы по одной. одна открылась другая закрылась.

рони · #6 (**permalink**) 24.11.2015, 11:19

Castromen,
на форуме ~~миллиард~~ открывашек, до жопы , но каждому нужна ещё своя, которая будет персонально для него

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <script src="https://code.jquery.com/jquery-1.11.3.min.js">
</script>
  <script>
$(function () {
       var div = $('.accordion>ul>li');
       div.click(function(){
             div.not($(this).toggleClass('active')).removeClass('active')
             });
  });
  </script>
  <style type="text/css">
 /* Формируем блок аккордеона */
.accordion {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    overflow: hidden;
}
/* список аккордеона */
.accordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
}
.accordion>ul>li {
    display:block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    height:36px;
/* задержка перехода при раскрытии */
    transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    -webkit-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
}
/* оформляем пункты */
.accordion>ul>li>h3 {
    display:block;
    margin: 0 auto;
    padding:7px 20px;
    color: #068306;
    text-decoration: none;
	font-size:13pt;
    text-shadow: 1px 1px #fff;
    text-transform:uppercase;
    background: #c9c9c9;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #d3d3d3;
/* градиент */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f0f0f0', endColorstr = '#c9c9c9')";
    background-image: -moz-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: -ms-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: -o-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), to(#c9c9c9));
    background-image: -webkit-linear-gradient(top, #f0f0f0, #c9c9c9);
    background-image: linear-gradient(top, #f0f0f0, #c9c9c9);
/* анимируем заголовок */
   -o-transition: padding-left 250ms ease-out;
   -webkit-transition: padding-left 250ms ease-out;
   -moz-transition: padding-left 250ms ease-out;
}
/* блок с содержанием */
.accordion>ul>li>div {
    background-color: hsla(110, 84%, 30%, 0.65);
    margin: 0 auto;
    padding:10px;
    color: #555;
    font-size: 13pt;
    height: 100%;
}
.accordion>ul>li.active {
    height: 280px;
}
/* пункты аккордеона при наведении */
.accordion>ul>li.active>h3 {
    /* оформляем пункты при наведении */
    color: #068306;
    background: #d3d3d3;
    cursor:pointer;
    /* градиент */
    background-image: -moz-linear-gradient( top, #d3d3d3, #efefef);
    background-image: -ms-linear-gradient( top, #d3d3d3, #efefef);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#efefef));
    background-image: -o-linear-gradient(#dbdbdb, #e6e6e6); /* Opera */
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#d3d3d3', endColorstr='#efefef')"; /* IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr= '#d3d3d3', endColorstr= '#efefef')";   /* IE 8 */
/* подвижная ссылка */
   padding-left: 30px;
}
/* параграфы внутри аккордеона */
.accordion p { margin: 0 0 10px }
/* миниатюры изображений */
.accordion img{ width: 25%; height: auto}


  </style>
</head>

<body>
<div class="accordion">
    <ul>
        <li>
            <h3>Закладка - </h3>

      </li>
         <li>
            <h3>Закладка - </h3>

      </li>
      <li>
            <h3>Закладка - </h3>

      </li>
  </ul>
</div>

</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript