Hata Şu Şekilde : Sıkça Sorulan Sorular Sekmesinin Açılma Efekti Mobil Versiyonda kullanılamıyor. Hata ne olabilir ?
<style media="screen" type="text/css">
<!--
.accordion{
border-radius: 4px;
overflow: hidden;
border: 1px solid #990000;
max-width: 1180px;
}
.accordion-panel__heading{
position: relative;
padding: 15px;
display: block;
text-decoration: none;
color: #660000;
background: #FFFFFF;
font-size: 18px;
font-weight: 600;
transition: all .2s;
cursor:pointer;
}
.accordion-panel__heading:not(:last-child){
border-bottom: 1px solid #990000;
}
.accordion-panel__heading:before{
transition: all .2s ease;
content: "";
border: 0px #660000 solid;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
}
.accordion-panel__heading.active:before{
transition: all .2s;
border-left: 8px #660000 solid;
}
.accordion-panel__heading:HOVER{
color: #333;
background: #f1f1f1;
transition: all .2s;
}
.accordion-panel__heading.active:HOVER,
.accordion-panel__heading.active {
transition: all .2s;
color: #333;
background: #fff;
border-bottom: 0;
padding: 20px 20px 20px 30px;
}
.accordion-panel__content{
transition: all .2s;
position: relative;
padding: 0 20px 0 20px;
background: #660000;
max-height: 0;
overflow: hidden;
}
.accordion-panel__content:before{
transition: all .2s ease;
content: "";
border: 0px #660000 solid;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
}
.accordion-panel__content.active:before{
transition: all .2s;
border-left: 8px #990000 solid;
}
.accordion-panel__content.active {
transition: all .2s;
max-height: 500px;
background: #fff;
padding: 10px 20px 15px 30px;
}
-->
</style>
<div> </div>
<div> </div>
<div>Sıkça Sorulan Sorular bölümümüzde Protez Saç ile ilgili olarak kullanıcıların yaşadıkları sorunlar ve deneyimlerden esinlenerek yazılmış soru ve cevapları bulabilirsiniz. </div>
<div style="font-size: 10pt;"> <span style="font-size: 10pt;"> </span></div>
<div><span century="" gothic",="" sans-serif;="" font-size:="" small;="" font-weight:="" bold;="" color:="" rgb(131,="" 0,="" 14);"="" style="font-weight: bold;">Aradığınız Soru ve Cevapları Bulamadınız Mı ?</span><span century="" gothic",="" sans-serif;="" font-size:="" small;="" font-weight:="" bold;="" color:="" rgb(131,="" 0,="" 14);"="" style="font-weight: bold; color: rgb(204, 0, 23);"> <a href="http://www.protezsacmarket.com/Sikca-Sorulan-Sorular-Soru-Formu,DFO-3.html" target="_blank">+ Şimdi Soru Sorun !</a></span></div>
<div> </div>
<section class="accordion" role="tablist" aria-multiselectable="false">
<a class="accordion-panel__heading" href="javascript:;">+ Protez Saç Nedir ?</a>
<div class="accordion-panel__content">
<h4></h4>
<p>Saçsız yada seyrek saçlı bölgeler için geliştirilmiş,cerrahi müdahale içermeyen bir saç yerleştirme sistemidir..</p> </div>
<a class="accordion-panel__heading" href="javascript:;">+ Havale ve EFT Ödemelerimi Nasıl Gerçekleştirebilirim ?</a>
<div class="accordion-panel__content">
<p>Protez Saç Market, üzerinden yaptığınız alışverişlerin Havale ve EFT Ödemelerini;<br />
Garanti Bankası: IBAN: TR640006200072700006297345 üzerinden yapabilirsiniz.</p> </div> <a class="accordion-panel__heading" href="javascript:;">+ Protez Saç Bakım Gerektirir Mi ?</a>
<div class="accordion-panel__content">
<p>Protez saç kullanıcıları ortalama 2 haftada bir bakım yaptırmak durumundadır.</p> </div>
<a class="accordion-panel__heading" href="javascript:;">+ Protez Saçın Ömrü Ne Kadardır ?</a>
<div class="accordion-panel__content">
<p>Doğal görünümlü bir protez saçı en fazla 1 sene kullanabilirsiniz.</p> </div> <a class="accordion-panel__heading" href="javascript:;">+ Protez Saçların Tamiri Mümkün Mü ?</a>
<div class="accordion-panel__content">
<p>Zamanla yıpranmış ve dökülmüş protez saçların onarımı mümkündür.</p> </div> <a class="accordion-panel__heading" href="javascript:;">+ Zamanla Saç Rengim Değişiyor Normal Mi ?</a>
<div class="accordion-panel__content">
<p>Gerçek saçtan üretilmiş her protez saçın rengi zamanla açma yapmaktadır. Bu durum normaldir.</p> </div> <a class="accordion-panel__heading" href="javascript:;">+ Protez Saç Dökülme Yapar Mı ?</a>
<div class="accordion-panel__content">
<h4></h4>
<p>Dökülmeyen Protez Saç yoktur.</p> </div> <a class="accordion-panel__heading" href="javascript:;">+ Protez Saçlara 5 - 10 Sene Garanti Verilebilir Mi ?</a>
<div class="accordion-panel__content">
<p>Kullanım ömrü en fazla 1 sene olan protez saçların 5-10 sene garantisi olmaz.</p> </div> <a class="accordion-panel__heading" href="javascript:;">+ Hazır Kalıp Protez Saç Nedir ? </a>
<div class="accordion-panel__content">
<h4></h4>
<p>Özel ölçü ve kalıp alınmadan belirli ölçü ve renklerde ithal edilen saçlardır.</p> </div> <a class="accordion-panel__heading" href="javascript:;">+ Kişiye Özel Protez Saç Nedir ?</a>
<div class="accordion-panel__content">
<h4></h4>
<p>Kişinin başının açık yada seyrek bölgelerinin bire bir kalıbı alınarak oluşturulan protez saça denir.</p> </div> <a class="accordion-panel__heading" href="javascript:;">+ Protez Saçlar Nerede Üretilir ?</a>
<div class="accordion-panel__content">
<h4></h4>
<p>Piyasada kullanılan protez saçların tamamına yakını uzakdoğuda üretilmektedir.</p> </div><a class="accordion-panel__heading" href="javascript:;">+ Colorless Knottıng Nedir ?</a>
<div class="accordion-panel__content">
<h4></h4>
<p>Protez alt yapısı üzerine işlenen saç diplerindeki düğümlerin ağartılmak suretiyle ,görünmez hale getirilme işlemidir.saçınızın geriye doğru taranmasına olanak sağlar.</p> </div><a class="accordion-panel__heading" href="javascript:;">+ Protez Saç Hava ve Su Geçirir Mi ?</a>
<div class="accordion-panel__content">
<h4></h4>
<p>Protez Saç hava ve su geçirir. Yinede protez saç ünitelerinizin, geçirgenliğinin yetersiz olduğunu düşünüyor ve kendinizi manevi olarak huzursuz hissederseniz günlük tak-çıkar yapabilirsiniz.</p> </div></section>
<script>
//<![CDATA[
var myAPP = myAPP || {};
myAPP.Accordion = function ( panelSelectorsObj ) { // e.g. function ({ heading: <String>, content: <String>})
this.panels = []; // Master list of collapsable panels. Accessible publically e.g myAPP.accordionContainer.panels[0].select();
this.panelSelectors = panelSelectorsObj; // an obj containing the panel selectors - { heading: <String>, content: <String>}
this.accordionPanels = document.querySelectorAll( this.panelSelectors['heading'] );
for (i = 0; i < this.accordionPanels.length; i++) {
this.makePanel( this.accordionPanels[i], i );
}
};
myAPP.Accordion.prototype = {
// resetPanels() - used for unselecting/collapsing AccordionPanels
resetPanels: function () {
this.panels.forEach( function ( v ) {
v.unselect();
});
},
// makePanel( <HTMLElement>, <position index used for naming> ) - Spawns a new AccordionPanel and pushes it into the master list of AccordionPanels controlled by Accordian
makePanel: function ( panelElement, index ) {
var panel = new myAPP.AccordionPanel( panelElement, this, index );
this.panels.push( panel );
}
};
myAPP.AccordionPanel = function ( headingEl, panelHolder, index ) {
// The AccordionPanel Class controls each of the collapsable panels spawned from Accordion Class
var self = this;
this.panelHolder = panelHolder;
this.index = index;
this.headingEl = headingEl; // this is the clickable heading
this.contentEl = headingEl.nextElementSibling;//headingEl.querySelector( this.panelHolder.panelSelectors['content'] );
this.isSelected = false;
this.setupAccessibility();
this.headingEl.addEventListener( "click", function () {
if (self.isSelected){
self.unselect(); // already open, presume user wants it closed
}
else {
self.panelHolder.resetPanels(); // close all panels
self.select(); // then open desired panel
}
});
return this;
};
myAPP.AccordionPanel.prototype = {
setupAccessibility: function(){
this.headingEl.setAttribute( 'role', 'tab' );
this.headingEl.setAttribute( 'aria-selected', 'false' );
this.headingEl.setAttribute( 'id', 'accordionHeading_' + this.index );
this.headingEl.setAttribute( 'aria-controls', 'accordionContent_' + this.index );
this.headingEl.setAttribute( 'tabindex', '0' );
this.headingEl.setAttribute( 'aria-expanded', 'false' ); // dynamic html attribute
this.contentEl.setAttribute( 'id', 'accordionContent_' + this.index );
this.contentEl.setAttribute( 'aria-labelledby', 'accordionHeading_' + this.index );
this.contentEl.setAttribute( 'role', 'tabpanel' );
this.contentEl.setAttribute( 'tabindex', '0' );
this.contentEl.setAttribute( 'aria-hidden', 'true' ); // dynamic html attribute
},
select: function () {
var self = this;
this.isSelected = true;
this.headingEl.addClass('active');
this.headingEl.setAttribute( 'aria-expanded', 'true' );
this.headingEl.setAttribute( 'aria-selected', 'true' );
this.contentEl.addClass('active');
this.contentEl.setAttribute( 'aria-hidden', 'false' );
setTimeout(function(){
self.contentEl.focus();
}, 1000); // wait for animation to finish before shifting focus (Don't need to - just looks nicer)
},
unselect: function () {
this.isSelected = false;
this.headingEl.removeClass('active');
this.headingEl.setAttribute( 'aria-expanded', 'false' );
this.headingEl.setAttribute( 'aria-selected', 'false' );
this.contentEl.removeClass('active');
this.contentEl.setAttribute( 'aria-hidden', 'true' );
}
};
myAPP.init = function () {
// Create Accordian instance and turn all elements with class '.accordion-panel' into AccordianPanel Class intances.
this.accordionContainer = new myAPP.Accordion({
heading: '.accordion-panel__heading',
content: '.accordion-panel__content'
}); // store the panel selectors in Accordian Class - Accordion( { heading: <String>, content: <String>} )
// Select second panel
this.accordionContainer.panels[1].select(); // or myAPP.accordionContainer.panels[0].select();
};
window.onload = function () {
myAPP.init();
};
/* ------------------------------------------------
C o n v e n i e n c e M e t h o d s
------------------------------------------------ */
HTMLElement.prototype.addClass = function ( className ) {
// e.g. el.addClass( 'className' );
if (this.classList){
this.classList.add( className );
}else{
this.className += ' ' + className;
}
}
HTMLElement.prototype.removeClass = function (className) {
// e.g. el.removeClass( 'className' );
if (this.classList){
this.classList.remove(className);
}else{
this.className = this.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
//]]>
</script>Kodlarımın tamamı bu şekildedir. Responsive olarak açılma işlevini kullanamıyorum. Mobil versiyonda.