Here you have the code:

html: in Option2 you have to add a class(<li class="parentChild">Option 2</li>)

<ul class="accordion">

    <li>
        <a class="toggle" href="javascript:void(0);">Item :A </a>

        <ul class="inner">
            <li>
                <a href="#" class="toggle">Item : a1</a>
                <div class="inner show">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
                    </p>
                </div>
            </li>

            <li>
                <a href="#" class="toggle">Item a2</a>
                <div class="inner">
                    <p>
                        Children will automatically close upon closing its parent.
                    </p>
                </div>
            </li>
            <li class="parentChild">Option 2</li>

        </ul>
    </li>
</ul>

css: in ul parent you have to add display:block!important; and in the Option 2 li.parentChild display:none;

ul {
  display:block!important;
  list-style: none;
  padding: 0;
}

ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}

ul .inner.show {
  /*display: block;*/
}

ul li {
  margin: .5em 0;
}

ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: .75em;
  border-radius: 0.15em;
  transition: background .3s ease;
}

ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}
ul li.parentChild{
  display:none;
}

javascript: you have to add $this.parent().parent().find('li .parentChild').toggle(); to both conditions

$('.toggle').click(function (e) {
            e.preventDefault();
            var $this = $(this);
            if ($this.next().hasClass('show')) {
                $this.next().removeClass('show');
                $this.next().slideUp(350);
                $this.parent().parent().find('li .parentChild').toggle();
            } else {
                $this.parent().parent().find('li .inner').removeClass('show');
                $this.parent().parent().find('li .inner').slideUp(350);
                $this.parent().parent().find('li .parentChild').toggle();
                $this.next().toggleClass('show');
                $this.next().slideToggle(350);
            }
        });

You can see the result in your jsfiddle link: https://jsfiddle.net/mwpo7d3L/20/

I am trying to make nested accordion with jQuery. So far I made this:

$('.toggle').click(function(e) {
  e.preventDefault();
  var $this = $(this);

  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.next().slideUp(350);
  } else {
    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Item :A </a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Item : a1</a>
        <div class="inner show">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
            blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
          </p>
        </div>
      </li>
      <li>
        <a href="#" class="toggle">Item a2</a>
        <div class="inner">
          <p>
            Children will automatically close upon closing its parent.
          </p>
        </div>
      </li>
      <li>Option 2</li>
    </ul>
  </li>
</ul>

However I am not satisfied with that, what am trying to achieve is something like this: 

Can somebody help me with this? Also, I created jsfiddle link: https://jsfiddle.net/9d3pnyc6/1/