Hiding articles when viewing sections

1 コメント

  • Ifra Saqlain
    Community Moderator

    Hi, Just copy the given code and paste at your script file:

    It's for your category page section blocks.

      var acc = document.getElementsByClassName("section-tree-title");
    var i;
    for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
    panel.style.display = "none";
    } else {
    panel.style.display = "block";

    In this code, I added hide class in article-list div:

    {{#each sections}}
    <section class="section">
    <h2 class="section-tree-title">
    {{name}} // Remove anchor tag so section won't redirect
    {{#if articles}}
    <ul class="article-list hide"> // Hide class added here
    {{#each articles}}
    <li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
    {{#if promoted}}
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-star" title="{{t 'promoted'}}">
    <path fill="currentColor" d="M2.88 11.73c-.19 0-.39-.06-.55-.18a.938.938 0 01-.37-1.01l.8-3L.35 5.57a.938.938 0 01-.3-1.03c.12-.37.45-.63.85-.65L4 3.73 5.12.83c.14-.37.49-.61.88-.61s. 3.73l3.11.17a.946.946 0 01.55 1.68L9.24 7.53l.8 3a.95.95 0 01-1.43 1.04L6 9.88l-2.61 1.69c-.16.1-.34.16-.51.16z"/>
    <a href="{{url}}" class="article-list-link">{{title}}</a>
    {{#if internal}}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
    <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
    <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    <i class="category-empty">
    <a href="{{category.url}}">{{t 'empty'}}</a>



    If any query regarding this let me know :)






Powered by Zendesk