Options don't display when click on it

Question

I'm making an option button (the tree dots above right). When click on it, the options must be show. Click again and the options hide. Below is my code, but it doesn't work. Can you look at it?

$("body").ready(function () {
    $(document).on("click", ".options-knop", function() {

        if (this.nextSibling.style.display == "none"){
            this.nextSibling.style.display = 'block !important';
        } else {
            this.nextSibling.style.display = 'none';
        }
    });
});

.img-wrapper {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 100%;
    float: left;
    margin: 5px;
}

.img-container {
    height: 100px;
}

.artist {
    transition: background-color 0.5s, color 0.5s;
    cursor: pointer;
}

.artist-outer {
    margin: 5px 0;
    padding: 10px 5px;
}

.artist .naam {
    width: 190px;
}

.options-knop {
    position: absolute;
    top: 15px;
    left: 325px;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    color: black !important;
    transition: background-color 0.5s, color 0.5s;
}

.artist-outer:nth-child(6n+4),
.artist-outer:nth-child(6n+5),
.artist-outer:nth-child(6n+6) {
    background-color: #eeeeee;
}

.artist:nth-child(6n+4) .options-knop,
.artist:nth-child(6n+5) .options-knop,
.artist:nth-child(6n+6) .options-knop {
    background-color: white;
}
.artist:nth-child(6n+1) .options-knop,
.artist:nth-child(6n+2) .options-knop,
.artist:nth-child(6n+3) .options-knop {
    background-color: #eeeeee;
}

.options-knop:hover{
    background-color: #a3a3a3 !important;
    color: white !important;
}

.artist-outer:hover{
    background-color: #545454 !important;
    color: white !important;
}

.options-list {
    display: none;
    position: absolute;
    z-index: 1;
    top: 50px;
    left: 260px;
}

.options-list ul {
    padding: 0;
}

.naam {
    max-height: 40px;
    overflow: hidden;
}

.list-group {
    padding-left: 0;
    margin-bottom: 20px
}

.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class='clearfix col-md-4 artist-outer' id='656556255'>
    <div class='artist'>
        <div class='artist-info'>
            <div class='img-wrapper'>
                <img style="width:100px" src='https://i.sstatic.net/kYnSM.gif'/>
            </div>
            <p class='naam'><b>Random naam</b></p>
            <p>Volgers op Spotify: XXX</p>
        </div>
        <div class='options-knop'>...</div>
        <div class='options-list list-group' style='display: none;'>
            <a class='list-group-item'>Toon albums</a>
            <a class='list-group-item'>Profiel</a>
        </div>
    </div>
</div>

Answer 1

$(document).ready(function () {
  $('.options-knop').click(function (e)
     {
        $('.options-list').toggle();
   });
});

.img-wrapper {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 100%;
    float: left;
    margin: 5px;
}

.img-container {
    height: 100px;
}

.artist {
    transition: background-color 0.5s, color 0.5s;
    cursor: pointer;
}

.artist-outer {
    margin: 5px 0;
    padding: 10px 5px;
}

.artist .naam {
    width: 190px;
}

.options-knop {
    position: absolute;
    top: 15px;
    left: 325px;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    color: black !important;
    transition: background-color 0.5s, color 0.5s;
}

.artist-outer:nth-child(6n+4),
.artist-outer:nth-child(6n+5),
.artist-outer:nth-child(6n+6) {
    background-color: #eeeeee;
}

.artist:nth-child(6n+4) .options-knop,
.artist:nth-child(6n+5) .options-knop,
.artist:nth-child(6n+6) .options-knop {
    background-color: white;
}
.artist:nth-child(6n+1) .options-knop,
.artist:nth-child(6n+2) .options-knop,
.artist:nth-child(6n+3) .options-knop {
    background-color: #eeeeee;
}

.options-knop:hover{
    background-color: #a3a3a3 !important;
    color: white !important;
}

.artist-outer:hover{
    background-color: #545454 !important;
    color: white !important;
}

.options-list {
    display: none;
    position: absolute;
    z-index: 1;
    top: 50px;
    left: 260px;
}

.options-list ul {
    padding: 0;
}

.naam {
    max-height: 40px;
    overflow: hidden;
}

.list-group {
    padding-left: 0;
    margin-bottom: 20px
}

.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
  color:black;
    border: 1px solid #ddd
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class='clearfix col-md-4 artist-outer' id='656556255'>
    <div class='artist'>
        <div class='artist-info'>
            <div class='img-wrapper'>
                <img style="width:100px" src='https://i.sstatic.net/kYnSM.gif'/>
            </div>
            <p class='naam'><b>Random naam</b></p>
            <p>Volgers op Spotify: XXX</p>
        </div>
        <div class='options-knop'>...</div>
        <div class='options-list list-group' style='display: none;'>
            <a class='list-group-item'>Toon albums</a>
            <a class='list-group-item'>Profiel</a>
        </div>
    </div>
</div>

Answer 2

First of all for me I don't like to mix jquery with pure Javascript if its no need for that

in your code use

$(document).ready();

instead of

$("body").ready

and use

$("body").on();

instead of

$(document).on()

and to get next element with jquery you need to use .next(); .. so jquery code should be like this

$(document).ready(function () {
    $("body").on("click", ".options-knop", function() {

        $(this).next('.options-list').slideToggle();

    });
});

Answer 3

Because you're using JQuery you can use function css() :

if ( $(this).next().css('display') == "none")
     $(this).next().show();
else
     $(this).next().hide();

Or simply use toggle() to toggle the display of your div show/hide without using condition :

$(this).next().toggle();

Hope this helps.

Answer 4

You might want to use jQuery.toggle

$(document).ready(function () {
    $(document).on("click", ".options-knop", function() {
        $(this.nextSibling).toggle( );
    });
});