How to show only Parent and Child element? Javascript

Question

I wish that when I clicked on parent it would show me his child element.

Since there is a multinesting,

When I select "List sub 2" I want "List 1" to disappear.
When I click again on "List 1", I want to see "List 1" and List 2 sub menu.
When click on "List sub2" to show "List 3 sub menu" and "List 1" to dissapear.

Another thing, the dropdown arrows should be if the list is open view arrows to the left and if the display is not opened right.

High priority is how to show property parent and child links.

Codepen code: https://codepen.io/anon/pen/RXKBeq

HTML:

<div class="dropdown">
    <button class="dropbtn dropbtn-three">
        DropDown Parent
        <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
        <ul>
            <li class="item-has-children">
                <a href="#0" class="padd-left">List 1 <span class="rightt">  </span></a>
                <ul class="sub-menu">
                    <li><a href="#0">List 2 sub menu <span class="rightt">  </span></a>
                        <ul class="sub-menu">
                            <li><a href="Dropdown3/entngien-staat.html">List 3 sub menu </a></li>
                            <div class="hr2"></div>
                            <li><a href="Dropdown3/verpflichtung-zu-interdarit.html">List 3 sub menu </a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS (sass)

$facebookBlue: #153161;
$strongRed: #9a0000;
$strongYellow: #ee8f01;
$white: #ffffff;
 * {
    box-sizing: border-box;
}
.dropdown {
    position: relative;
    display: inline-block;
    .dropbtn {
        background-color: $facebookBlue;
        color: $white;
        font-size: 17px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        height: 55px;
        background: #153161;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        padding: 12px 50px;
        position: relative;
        width: 360px;
        text-align: left;
        i {
            margin-left: 30px;
            color: #8391ab;
            position: absolute;
            top: 50%;
            right: 25px;
            transform: translateY(-50%);
        }
        .arrow {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #8191aa;
            margin: 100%;
            padding-top: 4px;
            z-index: 999;
        }
    }
    .dropbtn-two {
        background: $strongRed;
    }
    .dropbtn-three {
        background: $strongYellow;
    }
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    width: 330px;
    z-index: 999;
    a {
        color: black;
        padding: 12px 25px;
        text-decoration: none;
        display: flex;
        justify-content: flex-start;
        width: 100%;
        &:hover {
            background-color: #F8F8F8
        }
    }
    .rightt {
        display: inline-block;
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
        &:after {
            content: '';
            display: inline-block;
            width: 9px;
            height: 9px;
            border-top: 0.2em solid #ababab;
            border-right: 0.2em solid #ababab;
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    }
    .left {
        display: inline-block;
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
        &:after {
            content: '';
            display: inline-block;
            width: 29px;
            height: 29px;
            border-top: 0.2em solid #ababab;
            border-right: 0.2em solid #ababab;
            transform: rotate(45deg);
        }
    }
    .item-has-children {
        a {
            position: relative;
        }
    }
}

.dropdown:hover .dropdown-content {
    display: block;
    background: white;
    opacity: 0.95;
    width: 100%;
}

.hr2 {
    height: 1px;
    background: #ccc;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #ccc;
}

.sub-menu {
    display: none;
}

.sub-menu.selected {
    display: flex;
    flex-direction: column;
    transition: transform 0.6s;
}

ul {
    list-style: none;
    padding: 0 0px;
    width: 100%;
    height: 100%;
}

.rightt.selected {
    left: 40px;
    top: 25%;
    right: auto;
    transform: translateY(0);
    transform: rotate(180deg);
}

.padd-left {
    padding-left: 0px;
}

.padd-left.selected {
    padding-left: 70px;
}

JavaScript:

const links = document.querySelectorAll(".item-has-children");
const padd_left = document.querySelectorAll(".padd-left"); 
links.forEach((link) => {
  link.addEventListener('click', (e) => { 
    const index = Array.from(links).indexOf(link)
    if (e.target.nextElementSibling.classList.contains('selected')) {
      e.target.nextElementSibling.classList.remove('selected') 
      e.target.querySelector('.rightt').classList.remove('selected');
      Array.from(padd_left)[index].classList.remove('selected')
    } else {
      e.target.nextElementSibling.classList.add('selected')
      e.target.querySelector('.rightt').classList.add('selected');
      Array.from(padd_left)[index].classList.add('selected')
    }
  })
})

score 0 · Answer 1 · answered Jul 29 '19 at 16:37

0

There is something in earlier versions of bootstrap just not in newest.

also check this out. Some dude already done it but in b4.

answered Jul 29 '19 at 16:37

Veljko Stefanovic

481
6
25

Hi Veljko, did you read my question. I need collapse only parent and child. When open first submenu i need to show that submenu and their child. First parent i want to dissapear – Alex Al Jul 30 '19 at 07:08
@Alex Al Yes. With those you can do this. And with this https://www.w3schools.com/jsref/prop_node_parentelement.asp. There were other ways to do it, this is first that i come up googling ... – Veljko Stefanovic Jul 30 '19 at 10:05

Lazar Momcilovic · Answer 2 · 2019-07-30T21:09:06.523

Here's a simple solution but with jQuery. Please see the forked CodePen: https://codepen.io/lakialex/pen/eqvEBR

const links = $('.item-has-children a');

links.each(function() {
    $(this).on('click', function() {
      if ($(this).hasClass('selected')) {
        $(this).parent().parent().prev().show();
        $(this).next('ul').hide();
        $(this).removeClass('selected');
      } else {
        $(this).parent().parent().prev().hide();
        $(this).next('ul').show();
        $(this).addClass('selected');
      }
    });
});

I've changed the Sass a bit. For example there's no need for .padd-left class because you can style the .selected class for left padding and arrow change.

$facebookBlue: #153161;
$strongRed: #9a0000;
$strongYellow: #000;
$white: #ffffff;
 * {
    box-sizing: border-box;
}
body {
  display: flex;
  padding-top: 40px;
}
.dropdown {
    position: relative;
    display: inline-block;
  margin: 0 auto;
    .dropbtn {
        background-color: $facebookBlue;
        color: $white;
        font-size: 17px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        height: 55px;
        background: #153161;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        padding: 12px 50px;
        position: relative;
        width: 360px;
        text-align: left;
        i {
            margin-left: 30px;
            color: #8391ab;
            // opacity: 0.2;
            position: absolute;
            top: 50%;
            right: 25px;
            transform: translateY(-50%);
        }
        .arrow {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #8191aa;
            margin: 100%;
            padding-top: 4px;
            z-index: 999;
        }
    }
    .dropbtn-two {
        background: $strongRed;
    }
    .dropbtn-three {
        background: $strongYellow;
    }
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    width: 330px;
    z-index: 999;
    a {
        color: black;
        padding: 12px 25px;
        text-decoration: none;
        display: flex;
        justify-content: flex-start;
        width: 100%;
        &:hover {
            background-color: #F8F8F8
        }
    .rightt {
      display: inline-block;
      // width: 9px;
      // height: 9px;
      cursor: pointer;
      // padding-left: 180px;
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 999;
      &:after {
        content: '';
        display: inline-block;
        width: 9px;
        height: 9px;
        border-top: 0.2em solid #ababab;
        border-right: 0.2em solid #ababab;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }
    }
    &.selected {
      padding-left: 70px;
      .rightt {
        left: 40px;
        top: 25%;
        right: auto;
        transform: translateY(0);
        transform: rotate(180deg);
      }
    }
    }

    .left {
        display: inline-block;
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
        &:after {
            content: '';
            display: inline-block;
            width: 29px;
            height: 29px;
            border-top: 0.2em solid #ababab;
            border-right: 0.2em solid #ababab;
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    }
    .item-has-children {
        a {
            position: relative;
        }
    }
}

.dropdown:hover .dropdown-content {
    display: block;
    background: white;
    opacity: 0.95;
    width: 100%;
}

.hr2 {
    height: 1px;
    background: #ccc;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #ccc;
}

.sub-menu {
    display: none;
}

.sub-menu.selected {
    display: flex;
    flex-direction: column;
    transition: transform 0.6s;
}

ul {
    list-style: none;
    padding: 0 0px;
    width: 100%;
    height: 100%;
}

Keep in mind that I've added jQuery in CodePen settings.

Cheers!

Update

The CodePen is updated with vanilla JS that does exactly like previous jQuery code.

const links = document.querySelectorAll('li a');

links.forEach( function(el) {

    const parent = el.parentNode.parentNode.previousElementSibling;

    el.addEventListener('click', function() {
        if (el.classList.contains('selected')) {
            if (parent !== null) {
                parent.style.display = 'block';
            }
            el.nextElementSibling.style.display = 'none';
            el.classList.remove('selected');
        } else {
      if (el.nextElementSibling !== null) {
        el.nextElementSibling.style.display = 'block';
        el.classList.add('selected');
      }
            if (parent !== null && el.nextElementSibling !== null) {
                parent.style.display = 'none';
            }
        }
    }, false);

});

Cheers!

How to show only Parent and Child element? Javascript

2 Answers2

Update