Javascript ile Accordion Panel yapımı

20 Haziran 2015

minimalcoding

2475 0

Javascript ile Responsive Accordion Panel Yapımı

Bu yazımızda Javascprit ve CSS ile harmanlanmış basit kullanışlı bir Akordiyon Panel yapımıdan bahsediyor olacağız. Eğer isterseniz bir kaç değişiklik ile kullanışlı bir Javascript Accerdion Menu olarakta kullanmanız mümkün umarız işinize yarar. Uygulamalı örneği ve ilgili Javascript , Css , Sass ve Html kodlarını yazının devamında bulabilirsiniz.

Örnek

See the Pen Responsive Simple Accordion by MinimalCoding (@MinimalCoding) on CodePen.

Javascript Kod Yapısı




$(document).ready(function ($) {
        $(".title").click(function () {

            var cont = $(this).parents("article");
            $('.content').slideUp(300);
            var active = cont.find('.title');
            $(".title").removeClass("active");


            if (active.hasClass('active')) {
                active.removeClass('active');
            } else {
                active.addClass('active');
            }

            var detail = cont.find('.content');
            if (detail.is(':hidden')) {

                detail.slideDown(300);
            } else {
                detail.slideUp(300);
                active.removeClass('active');
            }
        });
    })

$(document).ready(function ($) {

$(".title").click(function () {

var cont = $(this).parents("article");

$('.content').slideUp(300);

var active = cont.find('.title');

$(".title").removeClass("active");

if (active.hasClass('active')) {

active.removeClass('active');

} else {

active.addClass('active');

}

var detail = cont.find('.content');

if (detail.is(':hidden')) {

detail.slideDown(300);

} else {

detail.slideUp(300);

active.removeClass('active');

}

});

})

HTML Kod Yapısı




<div class="main-container">

  <div class="container">

    <div class="lg-cont">
      <h1><span>Responsive</span> Accordion </h1>
    </div>
    <div class="clearfix"></div>
    <div class="mc-accordion">
      <article>
        <div class="title">
          <h3>Section 1</h3>
        </div>
        <div class="content">
          <h4>Lorem Ipsum is simply dummy</h4>

          <p>
            Text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
            but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
            PageMaker including versions of Lorem Ipsum
          </p>
        </div>
      </article>
      <article>
        <div class="title">
          <h3>Section 2</h3>
        </div>
        <div class="content">
          <h4>Lorem Ipsum is simply dummy</h4>

          <p>
            Text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
            but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
            PageMaker including versions of Lorem Ipsum
          </p>
        </div>
      </article>
      <article>
        <div class="title">
          <h3>Section 3</h3>
        </div>
        <div class="content">
          <h4>Lorem Ipsum is simply dummy</h4>

          <p>
            Text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
            but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
            PageMaker including versions of Lorem Ipsum
          </p>
        </div>
      </article>
      <article>
        <div class="title">
          <h3>Section 4</h3>
        </div>
        <div class="content">
          <h4>Lorem Ipsum is simply dummy</h4>

          <p>
            Text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
            but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
            PageMaker including versions of Lorem Ipsum
          </p>
        </div>
      </article>
    </div>
  </div>


</div>

<h1><span>Responsive</span> Accordion </h1>

</div>

<h3>Section 1</h3>

</div>

<h4>Lorem Ipsum is simply dummy</h4>

<p>

Text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,

but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus

PageMaker including versions of Lorem Ipsum

</p>

</div>

</article>

<h3>Section 2</h3>

</div>

<h4>Lorem Ipsum is simply dummy</h4>

<p>

PageMaker including versions of Lorem Ipsum

</p>

</div>

</article>

<h3>Section 3</h3>

</div>

<h4>Lorem Ipsum is simply dummy</h4>

<p>

PageMaker including versions of Lorem Ipsum

</p>

</div>

</article>

<h3>Section 4</h3>

</div>

<h4>Lorem Ipsum is simply dummy</h4>

<p>

PageMaker including versions of Lorem Ipsum

</p>

</div>

</article>

</div>

SASS Kod Yapısı




@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin,latin-ext);

$primary-color: #F5A623;
$secondary-color: #2D2E31;

body {
  font-family: 'Inconsolata';
  background-color: #D8D8D8;
  font-weight: 400;
  font-size: 14px;
  padding: 0;
  margin: 0;
}

p {
  line-height: 22px;
}

h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 18px;
}

h3, h4 {
  margin: 0;

}

.title {
  background-color: $primary-color;
  border-radius: 2px;
  padding: 15px;
  border-bottom: 1px solid white;
  -webkit-transition: background 800ms ease;
  -o-transition: background 800ms ease;
  transition: background 800ms ease;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none; /* Firefox all */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
  h3{
    -webkit-transition: color 800ms ease;
    -o-transition: color 800ms ease;
    transition: color 800ms ease;
  }
  &:after {
    position: absolute;
    content: "\f107";
    font-family:FontAwesome;
    font-size: 24px;
    right: 10px;
    top: 50%;
    -webkit-transition: all 800ms ease;
    -o-transition:  all 800ms ease;
    transition: all 800ms ease;
    -ms-transform: translate(0, -50%); /* IE 9 */
    -webkit-transform: translate(0, -50%); /* Safari */
    transform: translate(0, -50%);

  }
  &:hover {
    background-color: $secondary-color;
    color: white;
  }
  &.active {
    background-color: $secondary-color;
    color: white;
    &:after{

      ms-transform: rotate(180deg) translate(0, 50%); /* IE 9 */
      -webkit-transform: rotate(180deg) translate(0, 50%); /* Chrome, Safari, Opera */
      transform: rotate(180deg) translate(0, 50%);
    }
  }
}

.content {
  background-color: white;
  color: $secondary-color;
  padding: 10px 15px;
  display: none;
}

article {
  width: 100%;
  position: relative;
  padding-left: -15px;
  padding-right: -15px;
}

.mc-accordion{
  article {
    &:last-child {
      .title{
        border-bottom: none;
      }
    }

  }
}

.lg-cont{
  width: 100%;
  text-align: center;
  h1{
    span{
      color: $primary-color;
    }
  }
}
.container {
  &:before {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto
}
/** Responsive **/
@media (min-width: 768px) {
  .container {
    width: 750px
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin,latin-ext);

$primary-color: #F5A623;

$secondary-color: #2D2E31;

body {

font-family: 'Inconsolata';

background-color: #D8D8D8;

font-weight: 400;

font-size: 14px;

padding: 0;

margin: 0;

}

p {

line-height: 22px;

}

h4 {

margin-top: 10px;

margin-bottom: 10px;

font-size: 18px;

}

h3, h4 {

margin: 0;

}

.title {

background-color: $primary-color;

border-radius: 2px;

padding: 15px;

border-bottom: 1px solid white;

-webkit-transition: background 800ms ease;

-o-transition: background 800ms ease;

transition: background 800ms ease;

position: relative;

cursor: pointer;

-webkit-user-select: none; /* Chrome all / Safari all */

-moz-user-select: none; /* Firefox all */

-ms-user-select: none; /* IE 10+ */

user-select: none;

h3{

-webkit-transition: color 800ms ease;

-o-transition: color 800ms ease;

transition: color 800ms ease;

}

&:after {

position: absolute;

content: "\f107";

font-family:FontAwesome;

font-size: 24px;

right: 10px;

top: 50%;

-webkit-transition: all 800ms ease;

-o-transition: all 800ms ease;

transition: all 800ms ease;

-ms-transform: translate(0, -50%); /* IE 9 */

-webkit-transform: translate(0, -50%); /* Safari */

transform: translate(0, -50%);

}

&:hover {

background-color: $secondary-color;

color: white;

}

&.active {

background-color: $secondary-color;

color: white;

&:after{

ms-transform: rotate(180deg) translate(0, 50%); /* IE 9 */

-webkit-transform: rotate(180deg) translate(0, 50%); /* Chrome, Safari, Opera */

transform: rotate(180deg) translate(0, 50%);

}

.content {

background-color: white;

color: $secondary-color;

padding: 10px 15px;

display: none;

}

article {

width: 100%;

position: relative;

padding-left: -15px;

padding-right: -15px;

}

.mc-accordion{

article {

&:last-child {

.title{

border-bottom: none;

}

.lg-cont{

width: 100%;

text-align: center;

h1{

span{

color: $primary-color;

}

.container {

&:before {

display: table;

content: "";

}

&:after {

clear: both;

}

.container {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto

}

/** Responsive **/

@media (min-width: 768px) {

.container {

width: 750px

}

@media (min-width: 992px) {

.container {

width: 970px

}

@media (min-width: 1200px) {

.container {

width: 1170px

}

Javascript ile Responsive Accordion Panel Yapımı

Örnek

Javascript Kod Yapısı

HTML Kod Yapısı

SASS Kod Yapısı

Yorum yap