Toggle between panel links

أعتقد أنك تتحدث عن الحالة التي يكون فيها أحد ال panels مفتوح، فتضطر إلى الضغط مرتين في أول مرة يتم إغلاق ال panel المفتوح و في المرة الثانية لفتح ال panel المعني.

في هذه الحالة تحتاج عند الضغط ضمان غلق كل ال panels ما عدا العُنصر المعني تتركه على حالته و تقوم بتبديل حالته بوحده إن كان ظاهر تُخفيه إن كان مخفي تُظهره، لست مُلم بكافة العناصر التي لديك في الهيكلية لذلك المثال البسيط التالي مشابه للحالة التي تريد تطبيقها:

Html:

<ul>
  <li class="link" data-href="para1">Link 1</li>
  <li class="link" data-href="para2">Link 2</li>
  <li class="link" data-href="para3">Link 3</li>
</ul>

<div class="content">
  <p class="para d-none" id="para1">Content 1</p>
  <p class="para d-none" id="para2">Content 2</p>
  <p class="para d-none" id="para3">Content 3</p>
</div>

لدي 3 عناصر li و 3 عناصر p و كل عُنصر li مرتبط مع فقرة، إفتراضياً كل الفقرات مخفية، عند الضغط على li يتم إظهار و إخفاء عُنصر الفقرة المرتبط به و هذا كود الجافاسكربت:

var links = document.querySelectorAll('.link')

links.forEach(function(link) {
  link.addEventListener('click', function(event) {
    var targetElId = this.getAttribute('data-href')
    var relatedPara = document.getElementById(targetElId)     
    // ensure hide all paragraph except the current one
    document.querySelectorAll('.para').forEach(function(p) {
      if(p.getAttribute('id') != targetElId) {
        p.classList.add('d-none')
      }
    })
    
    // toggle related paragraph
    relatedPara.classList.toggle('d-none')
  })
})

المثال موجود على Codepen للتجربة: https://codepen.io/SamirAbboud/full/ExGbgBK

أعتقد أن السبب في هذا السلوك هو استخدام ال toggle في الجزء الثاني من ال addEventListener لذلك حاول تغيير الدالة toggle إلى classList.add وقم بحفظ التعديلات والإطلاع على النتيجة 

وإن لم تعمل كما تريد يفضل رفع ملفات المشروع

 شكرا لكما عبد الباسط و سمير عبود على مساعدتي و على التعليق قمت بعمل متغير لحفظ ال active panel حتى تفتح و تغلق بشكل جيد ولا تسبب مشكلة عند تبديل الروابط حيث انها لا تغلق حتى اضغط مرتين

 لكن تبقى امر بسيط و هو اريد عندما اغير من link الى link آخر اريد اضفاء transition الاغلاق و الفتح حيث انني لم استطع تنفيذها 

اي اريد مثلما اضغط و اغلق الpanel لوحده (حيث تظهر الpanel من خارج الجانب الايسر الى الجانب الايمن) اريد هذا الtransiton عندما انتقل من رابط الى رابط و الpanel مفتوحة

@سمير عبود @عبدالباسط ابراهيم

بتاريخ 7 ساعة قال Mohammad Kiblawi:

 

شكرا لكما عبد الباسط و سمير عبود على مساعدتي و على التعليق قمت بعمل متغير لحفظ ال active panel حتى تفتح و تغلق بشكل جيد ولا تسبب مشكلة عند تبديل الروابط حيث انها لا تغلق حتى اضغط مرتين

 لكن تبقى امر بسيط و هو اريد عندما اغير من link الى link آخر اريد اضفاء transition الاغلاق و الفتح حيث انني لم استطع تنفيذها 

اي اريد مثلما اضغط و اغلق الpanel لوحده (حيث تظهر الpanel من خارج الجانب الايسر الى الجانب الايمن) اريد هذا الtransiton عندما انتقل من رابط الى رابط و الpanel مفتوحة

@سمير عبود @عبدالباسط ابراهيم

 

لإضافة تأثيرات الانتقال (transition) عندما تنتقل من رابط إلى رابط والـ panel مفتوحة، عليك بالإعتماد على CSS لتحقيق ذلك، ويجب أن تقوم بتعريف الانتقال في CSS لعناصر الـ panel.

وفي الكود التالي، سأفترض أنك تريد تأثيرًا يظهر الـ panel من الجانب الأيسر ويختفي عند الإغلاق.

/* تعريف تأثير الانتقال */
.para {
  transition: transform 0.3s ease-in-out;
  transform-origin: left center;
  transform: translateX(-100%); /* ابدأ بإخفاء ال panel عند الشحنة الأولى */
}

/* تعريف حالة ظهور ال panel */
.para:not(.d-none) {
  transform: translateX(0); /* إظهار ال panel بشكل تأثيري */
}

هنا الكود يعرف تأثير الانتقال باستخدام transform على العناصر ، وpara ويقوم بتعيين النقطة الأصلية للتأثير من الجهة اليسرى (transform-origin: left center) ويبدأ بإخفاء العنصر بتحريكه خارج الشاشة عبر transform: translateX(-100%).

عندما تكون الفقرة مفتوحة (بمعنى أنها ليست .d-none)، ستتمكن من رؤية التأثير حيث يتحرك العنصر إلى اليسار ليظهر، وتستطيع تغيير مدى وسرعة التأثير من خلال تعديل قيم transition و transform.