How to remove cookie use js.cookie & jquery in toggles?

Question

Here is my html code:

<div class="accordion_container">
    <div class="accordion_head" node-tag="#1">First Accordian Head<span class="plusminus">+</span>
    </div>
    <div class="accordion_body">
        <p>First Accordian Body, it will have description</p>
    </div>
    <div class="accordion_head" node-tag="#2">Second Accordian Head<span class="plusminus">+</span>
    </div>
    <div class="accordion_body">
        <p>Second Accordian Body, it will have description</p>
    </div>
    <div class="accordion_head" node-tag="#3">Third Accordian Head<span class="plusminus">+</span>
    </div>
    <div class="accordion_body">
        <p>Third Accordian Body, it will have description</p>
    </div>
</div>

and this is my js script

$(document).ready(function () {
    //toggle the component with class accordion_body
    $(".accordion_head").click(function () {
        var tag = $(this).attr("node-tag");
        if ($(this).next(".accordion_body").is(':visible')) {
            $(this).next(".accordion_body").slideUp(300);
            $(this).next(".accordion_body").addClass("collapsed");
            Cookies.set('collapsed_Nodes', (Cookies.get('collapsed_Nodes') || '')+tag, { expires: 7, path: '' });
            $(this).children(".plusminus").text('+');
        } else {
            $(this).next(".accordion_body").slideDown(300);
            $(this).next(".accordion_body").addClass("expadned");
            Cookies.remove('collapsed_Nodes', (Cookies.remove('collapsed_Nodes') || '')+tag, { expires: 7, path: '' });
            $(this).children(".plusminus").text('-');
        }
    });
});

My question is, if I click collapse, it work, but when I click extend, it can't remove the value from cookie, it will just add the value to the cookie...

Can someone help me to find this problem?

Here is the js fiddle link

Answer 1

I have create a code example based on the hide class for the accordion_body element.
Instead of reading the cookies and manipulating its value for selected element, it will always write the value based on hidden accordion elements.
When nothing is hidden, then it will remove the cookies completely.

$(document).ready(function() {
  //toggle the component with class accordion_body
  $(".accordion_head").click(function() {
    var tag = $(this).data("node-tag");
    if ($(this).next(".accordion_body").is(':visible')) {
      $(this).next(".accordion_body").slideUp(300);
      $(this).next(".accordion_body").addClass("hide");
      $(this).children(".plusminus").text('+');
    }
    else {
      $(this).next(".accordion_body").slideDown(300);
      $(this).next(".accordion_body").removeClass("hide");

      $(this).children(".plusminus").text('-');
    }
    adjustCookie();
  });

  var adjustCookie = function() {
    var tags = [];
    $('.accordion_container .hide').each(function() {
      var tag = $(this).prev('.accordion_head').data("node-tag");
      tags.push(tag.replace('#', ''));
    });

    if (tags.length) {
      Cookies.set('collapsed_Nodes', tags.join('|'), {
        expires: 7
      });
    } else {
      Cookies.remove('collapsed_Nodes');
    }
  }
});

.accordion_container {
  width: 500px;
}

.accordion_head {
  background-color: skyblue;
  color: white;
  cursor: pointer;
  font-family: arial;
  font-size: 14px;
  margin: 0 0 1px 0;
  padding: 7px 11px;
  font-weight: bold;
}

.accordion_body {
  background: lightgray;
}

.accordion_body p {
  padding: 18px 5px;
  margin: 0px;
}

.plusminus {
  float: right;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>


<div class="accordion_container">
  <div class="accordion_head" data-node-tag="#1">First Accordian Head<span class="plusminus">-</span>
  </div>
  <div class="accordion_body">
    <p>First Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head" data-node-tag="#2">Second Accordian Head<span class="plusminus">-</span>
  </div>
  <div class="accordion_body">
    <p>Second Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head" data-node-tag="#3">Third Accordian Head<span class="plusminus">-</span>
  </div>
  <div class="accordion_body">
    <p>Third Accordian Body, it will have description</p>
  </div>
</div>

Answer 2

As per documentation , in order to remove a coockie you just neeed:

Cookies.remove('name');

in your case will be :

Cookies.remove('collapsed_Nodes');

Answer 3

Instead of removing the tag, you can simply rebuild it from all the values that should still be there. That way it follows the same logic each time.

$(document).ready(function() {
  var $accordionHead = $(".accordion_head");

  //toggle the component with class accordion_body
  $accordionHead.on("click", function() {
    var $head = $(this);

    $head.toggleClass("collapsed");

    if ($head.is(".collapsed")) {
      $head.next(".accordion_body").slideUp(300);
    } else {
      $head.next(".accordion_body").slideDown(300);
    }

    var $collapsedHeads = $accordionHead.filter(".collapsed");
    
    Cookies.set(
      "collapsed_Nodes",
      $collapsedHeads.map(function(){ return this.getAttribute("node-tag"); }).get().join(''),
      {
        expires: 7,
        path: ''
      }
    );
  });
});

.accordion_container {
  width: 500px;
}

.accordion_head {
  background-color: skyblue;
  color: white;
  cursor: pointer;
  font-family: arial;
  font-size: 14px;
  margin: 0 0 1px 0;
  padding: 7px 11px;
  font-weight: bold;
}

.accordion_body {
  background: lightgray;
}

.accordion_body p {
  padding: 18px 5px;
  margin: 0px;
}

.plus,
.minus {
  float: right;
}

.collapsed .minus,
.plus {
  display: none;
}

.collapsed .plus {
  display: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>

<div class="accordion_container">
  <div class="accordion_head" node-tag="#1">First Accordian Head<span class="plus">+</span><span class="minus">-</span>
  </div>
  <div class="accordion_body">
    <p>First Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head" node-tag="#2">Second Accordian Head<span class="plus">+</span><span class="minus">-</span>
  </div>
  <div class="accordion_body">
    <p>Second Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head" node-tag="#3">Third Accordian Head<span class="plus">+</span><span class="minus">-</span>
  </div>
  <div class="accordion_body">
    <p>Third Accordian Body, it will have description</p>
  </div>
</div>