jQuery Açılır/Kapanır içerik 2 katmanlı

Merhaba arkadaşlar yaklaşık 5 haftadır baya uygulama yazdım ama bir türlü makale yazmaya fırsat olmadı, neyseki şimdi bir fırsatını buldum ve sizlere güzel anlatımlı bir makale yazacağım.

Uygulama adı : jQuery Açılır/Kapanır içerik 2 katmanlı

Ön izleme :

jQuery Açılır içerik 2 katmanlı — jQuery Açılır/Kapanır içerik 2 katmanlı

Hemen kod yapısına geçiyoruz.

Html Kodları;

<!-- ================================================ -->
<!-- ! jQuery Acilir/Kapanir icerik -->
<!-- ================================================ -->
<div class="fakulteBilgileriKapsayici">
	<h1 class="ustBaslik" id="fakulteBilgileriH1">Detaylı Tanıtım Bilgileri</h1>
	<ul class="fakulteBilgileri" id="fakulteBilgileriUl">
		<li>
		<h1>Vizyon ve Misyon</h1>
		<p class="secili">
			 Vizyonumuz, Eğitim-öğretim kalitesi ve kişi odaklı hizmet anlayışıyla, Üniversitemizin yarım asrı aşan bilgi ve birikiminden de yararlanarak, ulusal ve uluslararası alanda açıköğretim programları konusunda öncelikli ve tercih edilebilir, Uluslararası standartlardaki eğitim ve öğretim metotları ile alanında gerekli bilgi ve beceriyle donatılmış, sosyal sorumluluk ve çevre bilincine sa.. <a href="#">devamını oku >> </a>
		</p>
		</li>
		<li>
		<h1>Tarihçe</h1>
		<p>
			 Vizyonumuz, Eğitim-öğretim kalitesi ve kişi odaklı hizmet anlayışıyla, Üniversitemizin yarım asrı aşan bilgi ve birikiminden de yararlanarak, ulusal ve uluslararası alanda açıköğretim programları konusunda öncelikli ve tercih edilebilir, Uluslararası standartlardaki eğitim ve öğretim metotları ile alanında gerekli bilgi ve beceriyle donatılmış, sosyal sorumluluk ve çevre bilincine sa.. <a href="#">devamını oku >> </a>
		</p>
		</li>
		<li>
		<h1>Felan filan</h1>
		<p>
			 Vizyonumuz, Eğitim-öğretim kalitesi ve kişi odaklı hizmet anlayışıyla, Üniversitemizin yarım asrı aşan bilgi ve birikiminden de yararlanarak, ulusal ve uluslararası alanda açıköğretim programları konusunda öncelikli ve tercih edilebilir, Uluslararası standartlardaki eğitim ve öğretim metotları ile alanında gerekli bilgi ve beceriyle donatılmış, sosyal sorumluluk ve çevre bilincine sa.. <a href="#">devamını oku >> </a>
		</p>
		</li>
	</ul>
</div>
<!-- fakulteBilgileriKapsayici DIV kapanis -->
<!-- ================================================ -->
<!-- ! jQuery Acilir/Kapanir icerik -->
<!-- ================================================ -->

<h1 class="ustBaslik" id="fakulteBilgileriH1">Detaylı Tanıtım Bilgileri</h1>

<li>

<h1>Vizyon ve Misyon</h1>

Vizyonumuz, Eğitim-öğretim kalitesi ve kişi odaklı hizmet anlayışıyla, Üniversitemizin yarım asrı aşan bilgi ve birikiminden de yararlanarak, ulusal ve uluslararası alanda açıköğretim programları konusunda öncelikli ve tercih edilebilir, Uluslararası standartlardaki eğitim ve öğretim metotları ile alanında gerekli bilgi ve beceriyle donatılmış, sosyal sorumluluk ve çevre bilincine sa.. <a href="#">devamını oku >> </a>

</p>

</li>

<li>

<h1>Tarihçe</h1>

<p>

</p>

</li>

<li>

<h1>Felan filan</h1>

<p>

</p>

</li>

</ul>

</div>

Css kodlarımız ;

body {
    background: #08203c;
    font-family: "Trebuchet MS", Arial, serif;
    font-size: 11px;
    color: #e9e9e9;
    line-height: 13px;
}

.fakulteBilgileriKapsayici {
    width: 100%;
    overflow: hidden;
    background: #f3f3f3;
}

.fakulteBilgileriKapsayici h1.ustBaslik {
    overflow: hidden;
    color: #333;
    background: url(../resim/ok.gif) 5px 14px no-repeat;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    padding: 10px 5px 10px 15px;
    margin-left: 15px;
    cursor: pointer;
    border-top: 1px solid #E3E3E3;
}

.fakulteBilgileriKapsayici h1.ustBaslik:hover {
    background: #f9f9f9 url(../resim/ok.gif) 5px 14px no-repeat;
}

ul.fakulteBilgileri {
    width: 96%;
    overflow: hidden;
    display: none;
    margin: 0px auto;
}

ul.fakulteBilgileri li {
    width: 100%;
    overflow: hidden;
    background: #f3f3f3;
    border-top: 1px solid #E3E3E3;
    cursor: pointer;
}

ul.fakulteBilgileri li:hover {
    background: #f9f9f9;
}

ul.fakulteBilgileri li h1 {
    overflow: hidden;
    color: #333;
    background: url(../resim/ok.gif) 5px 14px no-repeat;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    padding: 10px 5px 10px 15px;
    margin-left: 15px;
}

ul.fakulteBilgileri li p {
    overflow: hidden;
    color: #333;
    margin-left: 31px;
    line-height: 14px;
    padding: 0px 5px 10px 0;
    display: none;
}

ul.fakulteBilgileri li p.secili {
    display: block;
}

ul.fakulteBilgileri li a {
    color: #00AAFF;
}

body {

background: #08203c;

font-family: "Trebuchet MS", Arial, serif;

font-size: 11px;

color: #e9e9e9;

line-height: 13px;

}

.fakulteBilgileriKapsayici {

width: 100%;

overflow: hidden;

background: #f3f3f3;

}

.fakulteBilgileriKapsayici h1.ustBaslik {

overflow: hidden;

color: #333;

background: url(../resim/ok.gif) 5px 14px no-repeat;

font-size: 14px;

font-weight: bold;

line-height: 16px;

padding: 10px 5px 10px 15px;

margin-left: 15px;

cursor: pointer;

border-top: 1px solid #E3E3E3;

}

.fakulteBilgileriKapsayici h1.ustBaslik:hover {

background: #f9f9f9 url(../resim/ok.gif) 5px 14px no-repeat;

}

ul.fakulteBilgileri {

width: 96%;

overflow: hidden;

display: none;

margin: 0px auto;

}

ul.fakulteBilgileri li {

width: 100%;

overflow: hidden;

background: #f3f3f3;

border-top: 1px solid #E3E3E3;

cursor: pointer;

}

ul.fakulteBilgileri li:hover {

background: #f9f9f9;

}

ul.fakulteBilgileri li h1 {

overflow: hidden;

color: #333;

background: url(../resim/ok.gif) 5px 14px no-repeat;

font-size: 14px;

font-weight: bold;

line-height: 16px;

padding: 10px 5px 10px 15px;

margin-left: 15px;

}

ul.fakulteBilgileri li p {

overflow: hidden;

color: #333;

margin-left: 31px;

line-height: 14px;

padding: 0px 5px 10px 0;

display: none;

}

ul.fakulteBilgileri li p.secili {

display: block;

}

ul.fakulteBilgileri li a {

color: #00AAFF;

}

En önemli kısım jQuery kodlarımız ;

/**
 * --------------------------------------------------------------------
 * jQuery acilir/kapanir icerik 2 katmanli
 * Aycan BULBUL, ab@aycan.net
 * Tarih 19 Ocak 2011
 *
 * http://www.aycan.net/
 * * --------------------------------------------------------------------
 * Kullanim klavuzu
 * http://www.aycan.net/jquery-ajax-javascript/jquery-acilir-icerik-2-katmanli.html
 *
 */
/**
 * fakulteBilgileriH1 id'li h1 tagina tiklaninca
 **/
jQuery('h1#fakulteBilgileriH1').live('click', function () {
    /**
     * h1 tagindan sonraki ul.fakulteBilgileri 'ini bul ve ac
     **/
    jQuery(this).next('ul#fakulteBilgileriUl').toggle('medium');

});
/**
 * ul#fakulteBilgileriUl li h1'e tiklandiginda
 **/
jQuery('ul#fakulteBilgileriUl li h1').live('click', function () {
    /**
     * h1 tagindan sonra gelen p taginin display degerini gorunurluk diye degiskene at
     **/
    var gorunurluk = jQuery(this).next('p').css('display');
    /**
     * eger gorunurluk = none ise yani p tagi gosterilmiyorsa
     */
    if (gorunurluk == 'none' || gorunurluk == 'NONE') {
        /**
         * Bu kisimda ise eger onceden acik bir p tagimiz varsa onu kapatiyoruz.
         * iki tane parent yazma sebebim ise ayni sayfa icinde birden fazla bu uygulama kullanilabilir o yuzden birbirlerini
         * etkilemesinler diye tiklanan h1 taginin iki ustune cikip p tagini arattirdim ve var olan butun p taglarini kapattirdim.
         **/
        jQuery(this).parent().parent().find('p').slideUp('fast');
        /**
         * Eger p tagi gorunmez ise onu gorunur yap yani slideDown().
         **/
        jQuery(this).next('p').slideDown('fast');
    } else {
        /**
         * Eger p tagi gorunur ise onu gorunmez yap yani slideUp().
         **/
        jQuery(this).next('p').slideUp('fast');
    }

});

/**

* --------------------------------------------------------------------

* jQuery acilir/kapanir icerik 2 katmanli

* Aycan BULBUL, ab@aycan.net

* Tarih 19 Ocak 2011

* http://www.aycan.net/

* * --------------------------------------------------------------------

* Kullanim klavuzu

* http://www.aycan.net/jquery-ajax-javascript/jquery-acilir-icerik-2-katmanli.html

/**

* fakulteBilgileriH1 id'li h1 tagina tiklaninca

**/

jQuery('h1#fakulteBilgileriH1').live('click', function () {

/**

* h1 tagindan sonraki ul.fakulteBilgileri 'ini bul ve ac

**/

jQuery(this).next('ul#fakulteBilgileriUl').toggle('medium');

});

/**

* ul#fakulteBilgileriUl li h1'e tiklandiginda

**/

jQuery('ul#fakulteBilgileriUl li h1').live('click', function () {

/**

* h1 tagindan sonra gelen p taginin display degerini gorunurluk diye degiskene at

**/

var gorunurluk = jQuery(this).next('p').css('display');

/**

* eger gorunurluk = none ise yani p tagi gosterilmiyorsa

if (gorunurluk == 'none' || gorunurluk == 'NONE') {

/**

* Bu kisimda ise eger onceden acik bir p tagimiz varsa onu kapatiyoruz.

* iki tane parent yazma sebebim ise ayni sayfa icinde birden fazla bu uygulama kullanilabilir o yuzden birbirlerini

* etkilemesinler diye tiklanan h1 taginin iki ustune cikip p tagini arattirdim ve var olan butun p taglarini kapattirdim.

**/

jQuery(this).parent().parent().find('p').slideUp('fast');

/**

* Eger p tagi gorunmez ise onu gorunur yap yani slideDown().

**/

jQuery(this).next('p').slideDown('fast');

} else {

/**

* Eger p tagi gorunur ise onu gorunmez yap yani slideUp().

**/

jQuery(this).next('p').slideUp('fast');

}

});

Kodlarımız bu kadar arkadaşlar. bu uygulamayı yazarken jquery’nin seçiçilerini kullandık eğer bu seçiçiler hakkında bilginiz yoksa istek üzerine o seçiçiler üzerine makale yazabilirim şimdilik jquery’nin kendi anlatım ve örneklerine sevk ediyorum sizi.

live() , next() , css() , parent() , slideUp() , slideDown()

Şimdi js kodlarımızı adım adım anlatalım.

h1#fakulteBilgileriH1 tagı tıklanıldığında

jQuery('h1#fakulteBilgileriH1').live('click',function(){

1	jQuery('h1#fakulteBilgileriH1').live('click',function(){

Tıklanılan h1 tagından sonraki ul.fakulteBilgileri ‘ini bul ve aç

 jQuery(this).next('ul#fakulteBilgileriUl').toggle('medium');

1	jQuery(this).next('ul#fakulteBilgileriUl').toggle('medium');

Buraya kadar olan kısım ilk katmanımızdı arkadaşlar yani h1 tagına tıklayınca onun altındaki ul#fakulteBilgileriUl ul’unu açıyoruz ve ikinci katman için kodlarımızı yazıyoruz.

ul#fakulteBilgileriUl li h1 tagına tıklanıldığında

jQuery('ul#fakulteBilgileriUl li h1').live('click',function(){

1	jQuery('ul#fakulteBilgileriUl li h1').live('click',function(){

h1 tagından sonra gelen p tagının display değerini gorunurluk diye değişkene at.

var gorunurluk = jQuery(this).next('p').css('display');

1	var gorunurluk = jQuery(this).next('p').css('display');

Eğer gorunurluk = none ise yani p tagı gösterilmiyorsa

if(gorunurluk == 'none' || gorunurluk == 'NONE') {

1	if(gorunurluk == 'none' \|\| gorunurluk == 'NONE') {

Bu kisimda ise eğer önceden açık bir p tagımız varsa onu kapatıyoruz. İki tane parent yazma sebebim ise ayni sayfa içinde birden fazla bu uygulama kullanılabilir o yüzden birbirlerini
etkilemesinler diye tıklanan h1 tagının iki üstüne çıkıp p tagını arattırdım ve var olan bütün p taglarını kapattırdım.

jQuery(this).parent().parent().find('p').slideUp('fast');

1	jQuery(this).parent().parent().find('p').slideUp('fast');

Eğer p tagı görünmez ise onu görünür yap yani slideDown().

jQuery(this).next('p').slideDown('fast');

1	jQuery(this).next('p').slideDown('fast');

Eğer p tagı görünür ise onu görünmez yap yani slideUp().

jQuery(this).next('p').slideUp('fast');

1	jQuery(this).next('p').slideUp('fast');

Evet arkadaşlar tüm kodlarımız bu kadardır. Css yapısını esnek yaptım belirlediğiniz bir divin içine atarsanız onun boyutu kadar genişleyecektir.
Ayrıca ikinci katmanda hangi p tagının açık gelmesini istiyorsanız onun class’ına “secili” yazarsanız o p tagı açık gelecektir.

Css şeması :

Uygulama hakkında takıldığınız noktaları belirtirseniz yardımcı olmaya çalışırım.

Uygulama demosu Uygulama İndir

Post Views: 11.438