How to add a list of Sections in the sidebar on a sections page?

Thank you so much Ifra Saqlain that has worked! One last thing, I'm trying to add styling to the section sidebar so that it matches the styling/spacing of the article sidebar but nothing I do is having an effect? Do you know why this might be?

It's bcz same class name,  you need to change it:

i). Go to the script.js file,

ii). Change the class name in this line of code,

Old -

var dumpCatName = $('.collapsible-sidebar-title.sidenav-title').text(catName);

New

var dumpCatName = $('.collapsible-sidebar-title.section-sidenav-title').text(catName);

iii). Go to the section_page.hbs file and change the class name in head tag -

Old -

 <h3 class="collapsible-sidebar-title sidenav-title">

New-

 <h3 class="collapsible-sidebar-title section-sidenav-title">

Now you can test the article page and section page.

Hi Ifra Saqlain thanks this has worked, however, it has caused the 'articles in this section' header on the articles page to rename to the category name (see screenshot below - it has been renamed to category 'General'):

How can I revert this? Thank you!

@Etta Donovan,

Remove previous script code and add this :

$(document).ready(function () {
  var catID = $('.breadcrumbs li:nth-child(2) a').attr('href').match(/[0-9]+/);
  var catName = $('.breadcrumbs li:nth-child(2) a').text();
  var dumpCatName = $('.collapsible-sidebar-title.sidenav-title').text(catName);
  console.log(catName);
  
 $.getJSON('/api/v2/help_center/en-gb/categories/'+catID+'/sections.json', function(data) {
   //console.log(data.sections);
   var output = "";
   $.each(data.sections, function(idx, itm) {
    output += '<li>';
    output += '<a href="'+itm.html_url+'">'+itm.name+'</a>';
    output += '</li>';
   });
  $('#sections-list').append('<ul>'+output+'</ul>')
 });
  
});

Hi Ifra Saqlain - here is the URL: https://wondrsupport.zendesk.com/hc/en-gb/sections/5019975940509-Wondr-Medical-App

You can see that the category header has appeared but none of the sections underneath.

Hey Etta Donovan,

If possible send your HC public URL so I can see the bug because it's working for me:

Source:

i). Go to the script.js file and paste he given snippet.

$(document).ready(function () {

 var catID = $('.breadcrumbs li:nth-child(2) a').attr('href').match(/[0-9]+/);
  
  var catName = $('.breadcrumbs li:nth-child(2) a').text();
  var dumpCatName = $('.collapsible-sidebar-title.sidenav-title').text(catName);
  console.log(catName);
  
 $.getJSON('/api/v2/help_center/en-us/categories/'+catID+'/sections.json', function(data) {
   //console.log(data.sections);
   var output = "";
   $.each(data.sections, function(idx, itm) {
    output += '<li>';
    output += '<a href="'+itm.html_url+'">'+itm.name+'</a>';
    output += '</li>';
   });
  $('#sections-list').append('<ul>'+output+'</ul>')
 });
  
});

ii). Go to your section_page.hbs file and add the HTML as in the given screenshot.

  <section id="sections-list" class="sections-list collapsible-sidebar">
  <h3 class="collapsible-sidebar-title sidenav-title">

  </h3>
 </section>

iii). Go to your document_head.hbs file and add the jQuery CDN.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Hi Ifra Saqlain - I tried your code and am having the same issue as Oliver. Only the category header is showing even though I have 3 sections in this category - could you help please?

Hey Oliver Mottram, I just tried my code and I can add sections in my category:

i). Add the script code to the script.js file at the bottom.

$(document).ready(function () {
  var catID = $('.breadcrumbs li:nth-child(2) a').attr('href').match(/[0-9]+/);
  var catName = $('.breadcrumbs li:nth-child(2) a').text();
  var dumpCatName = $('.collapsible-sidebar-title.sidenav-title').text(catName);
  
   $.getJSON('/api/v2/help_center/en-us/categories/'+catID+'/sections.json', function(data) {
   console.log(data);
   var output = "";
     
   $.each(data.sections, function(idx, itm) {
    output += '<li class="sidebar-list-item" data-id="'+itm.id+'">';
    output += '<a href="'+itm.html_url+'">'+itm.name+'</a>';
    output += '</li>';
 });
      
    $('#sections-list').append('<ul>'+output+'</ul>');
       $('.section-list-item').each(function() {
      var _z = $( this ).attr('data-id');
      console.log(_z);
          $('.sidebar-list-item').each(function() {
      var _y = $( this ).attr('data-id');
      console.log(_y);
          if(_y == _z) {
            $(this).addClass("subsection-item");
          }
        });
    });
  });
});

ii). Add the HTML tags to the section page inside the container.

 <section id="sections-list" class="sections-list collapsible-sidebar">
  <h3 class="collapsible-sidebar-title sidenav-title">

  </h3>
 </section>


Screenshot:

iii). Add data-id to the subsection list tag <li> tag.

iv). Add this CSS to the style.css file at the bottom area.

.subsection-item {
  padding: 10px 20px;
}

Output is:

If your category has sections then section list would be shown without any doubt.

Let me know if any confusion :)

And, check the console in the dev-tool if you find any bug, share the screenshot here.

If you have different type of query related to this, you can ask.

Thanks

Have a nice Day!

Hi Ifra Saqlain I tried this code, however it just shows the category title on the left hand side of the section page, rather than the other sections in that category - would you be able to help please?

Thanks, Ifra Saqlain! 30 subsections in general (in the whole HC) or 30 subsections in one section? We may have around that in the whole HC, but not in a single section. Is there any way around this? Or pretty much it just won't be achievable?