Widget talk:BrowseTabs

<style>

 .ns-browse-widget {
   background: #ffffff;
   border-radius: 10px;
   padding: 1rem 1.25rem;
   box-shadow: 0 4px 14px rgba(0,0,0,0.06);
   font-size: 0.95rem;
 }

 .ns-browse-tabs {
   display: flex;
   gap: 1.25rem;
   border-bottom: 1px solid #e5e7eb;
   margin-bottom: 0.75rem;
 }

 .ns-browse-tab {
   background: none;
   border: none;
   padding: 0.5em 0;
   font-weight: 500;
   color: #3366cc;
   cursor: pointer;
   border-bottom: 3px solid transparent;
 }

 .ns-browse-tab.active {
   color: #202122;
   border-color: #3366cc;
 }

 .ns-browse-panel {
   display: none;
 }

 .ns-browse-panel.active {
   display: block;
 }

 .ns-browse-panel ul {
   margin: 0.5em 0 0.25em 1.2em;
   padding: 0;
 }

 .ns-browse-panel li {
   margin: 0.35em 0;
 }

 .ns-browse-more {
   margin-top: 0.5rem;
   font-size: 0.9rem;
 }

</style>

 <nav class="ns-browse-tabs" role="tablist">
   <button class="ns-browse-tab active" data-tab="concepts" role="tab">
     Key Concepts
   </button>
   <button class="ns-browse-tab" data-tab="people" role="tab">
     People
   </button>
   <button class="ns-browse-tab" data-tab="seminars" role="tab">
     Seminars
   </button>
   <button class="ns-browse-tab" data-tab="institutions" role="tab">
     Institutions
   </button>
 </nav>

 <section class="ns-browse-panel active" data-panel="concepts" role="tabpanel">
   <wiki>

• The Symbolic
• The Imaginary
• The Real
• Objet petit a
• Point de capiton

   → See more
   </wiki>
 </section>

 <section class="ns-browse-panel" data-panel="people" role="tabpanel">
   <wiki>

• Jacques Lacan
• Sigmund Freud
• Jacques-Alain Miller
• Slavoj Žižek

   → See more
   </wiki>
 </section>

 <section class="ns-browse-panel" data-panel="seminars" role="tabpanel">
   <wiki>

• Seminar XI
• Seminar VII
• Seminar XVII
• Seminar XX

   → All seminars
   </wiki>
 </section>

 <section class="ns-browse-panel" data-panel="institutions" role="tabpanel">
   <wiki>

• École Freudienne de Paris
• World Association of Psychoanalysis
• International Psychoanalytical Association
• The Lacan Circle of Australia

   → See more
   </wiki>
 </section>

<script> (function () {

 const widget = document.querySelector('[data-widget="browse-tabs"]');
 if (!widget) return;

 const tabs = widget.querySelectorAll('.ns-browse-tab');
 const panels = widget.querySelectorAll('.ns-browse-panel');

 tabs.forEach(tab => {
   tab.addEventListener('click', () => {
     const target = tab.getAttribute('data-tab');

     tabs.forEach(t => t.classList.remove('active'));
     panels.forEach(p => p.classList.remove('active'));

     tab.classList.add('active');
     widget.querySelector('[data-panel="' + target + '"]').classList.add('active');
   });
 });

})(); </script>