How can I make my accordion check for children so the parents are also clickable?

Question

I have the following code applied to my website:

$j(".m-accordion-item > a").click(function(e) {
  e.preventDefault();
  $j(".m-accordion-item > a").removeClass("accordian-active");
  $j(".m-accordion-nav ul ul").slideUp();
  if (!$j(this).next().is(":visible")) {
    $j(this).next().slideDown();
    $j(this).addClass("accordian-active");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="m-accordion-nav">
    <ul class="ul-reset">                                
        <li class="m-accordion-item dropArrow">
            <a href="bespoke-joinery-4-c.asp" class="">Bespoke Joinery</a>
            <ul class="ul-reset" style="display: none;">
                <li><a href="extra-21-c.asp">extra</a></li>        
                <li><a href="test-subcategory-1-5-c.asp">Test subcategory 1</a></li>        
                <li><a href="test-subcategory-10-20-c.asp">Test subcategory 10</a></li>        
                <li><a href="test-subcategory-2-13-c.asp">Test subcategory 2</a></li>        
                <li><a href="test-subcategory-3-12-c.asp">Test subcategory 3</a></li>        
                <li><a href="test-subcategory-4-19-c.asp">Test subcategory 4</a></li>        
                <li><a href="test-subcategory-5-16-c.asp">Test subcategory 5</a></li>        
                <li><a href="test-subcategory-6-17-c.asp">Test subcategory 6</a></li>        
                <li><a href="test-subcategory-7-10-c.asp">Test subcategory 7</a></li>        
                <li><a href="test-subcategory-8-14-c.asp">Test subcategory 8</a></li>        
                <li><a href="test-subcategory-9-18-c.asp">Test subcategory 9</a></li>
                <li><a href="bespoke-joinery-4-c.asp">View All</a></li>
            </ul>
        </li>
        <li class="m-accordion-item">
            <a href="doors-7-c.asp" class="">Doors</a>
        </li>
        <li class="m-accordion-item">
            <a href="windows-8-c.asp">Windows</a>
        </li>
    </ul>
</nav>

It currently works for my child anchors however I am struggling to come up with a solution to allow my parent anchors to also be clickable.

I know removing the e.preventDefault allows the parents to work but then I cannot get to the children without the parent anchor working.

Answer 1

Seemed we are not understand your actual issue as there was no HTML snip for this. If you have different elements with same CSS classes, then add use different CSS class and write your JS - what you did for child.

$j(".m-accordion-item.parent-item > a").click(function(e) {
// Your stuffs
});

$j(".m-accordion-item.child-item > a").click(function(e) {
// Your stuffs
});