I made a code, where there is a plus (+) image. When you click it, it rotates, until rotation is 45° (x). I am making it through toggleClass ... Now, i have about 7 of those images, but this click event is running ONLY for the first one, why? i tried each function, but still same.. totally lost...

there is the code for jQuery:

$("#plus_x").each(function() {
$(this).on("click", function(){
                console.log("CLICK!");
                $(this).toggleClass("box_rotate box_transition");
                $("#item").hasClass("open-panel") 
                    ? ($("#item").delay(250).animate({height: '75px'}),  
                        $("#item").removeClass("open-panel"))

                    : ($("#item").delay(250).animate({height: "300px"}), 
                        $("#item").addClass("open-panel"));
            });
    });

here's HTML:

    <div id="timeline">
                <div id="item" style="border-left: 4px solid #8E44AD;">
                    <div id="date">
                        <h1>31. 5.</h1>
                    </div>

                    <div id="plus">
                        <img id="plus_x" src="plus.png" style="">
                    </div>
                </div>
                <div id="item">
                    <div id="date">
                        <h1>31. 5.</h1>
                    </div>

                    <div id="plus">
                        <img id="plus_x" src="plus.png" style="">
                    </div>
                </div>
                <div id="item">
                    <div id="date">
                        <h1>31. 5.</h1>
                    </div>

                    <div id="plus">
                        <img id="plus_x" src="plus.png" style="">
                    </div>
                </div>
                <div id="item">
                    <div id="date">
                        <h1>31. 5.</h1>
                    </div>

                    <div id="plus">
                        <img id="plus_x" src="plus.png" style="">
                    </div>
                </div>
            </div>

and css..:

#item{
    height: 75px;
    width: 100%;
    background-color: white;
    border-bottom: 2px solid #464646;
}

    .item_roll{
        height: 275px;
    }

.box_rotate {
  -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(45deg);  /* IE 9 */
        -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */
         transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}
.box_transition {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}

#date{
    width: 50%;
    float: left;
}

#plus{
    width: 75px;
    height: 75px;
    float: right;
    padding: 22.5px;
}

Hope, you now have maximum information to fix my problem. Of corse, THERE is link to my website, so at the bottom of the page, check that out, try it... Please help me

Thanks

NOTE!

Looks pretty weird in Edge, don't know why....

I made a code, where there is a plus (+) image. When you click it, it rotates, until rotation is 45° (x). I am making it through toggleClass ... Now, i have about 7 of those images, but this click event is running ONLY for the first one, why? i tried each function, but still same.. totally lost...

there is the code for jQuery:

$("#plus_x").each(function() {
$(this).on("click", function(){
                console.log("CLICK!");
                $(this).toggleClass("box_rotate box_transition");
                $("#item").hasClass("open-panel") 
                    ? ($("#item").delay(250).animate({height: '75px'}),  
                        $("#item").removeClass("open-panel"))

                    : ($("#item").delay(250).animate({height: "300px"}), 
                        $("#item").addClass("open-panel"));
            });
    });

here's HTML:

    <div id="timeline">
                <div id="item" style="border-left: 4px solid #8E44AD;">
                    <div id="date">
                        <h1>31. 5.</h1>
                    </div>

                    <div id="plus">
                        <img id="plus_x" src="plus.png" style="">
                    </div>
                </div>
                <div id="item">
                    <div id="date">
                        <h1>31. 5.</h1>
                    </div>

                    <div id="plus">
                        <img id="plus_x" src="plus.png" style="">
                    </div>
                </div>
                <div id="item">
                    <div id="date">
                        <h1>31. 5.</h1>
                    </div>

                    <div id="plus">
                        <img id="plus_x" src="plus.png" style="">
                    </div>
                </div>
                <div id="item">
                    <div id="date">
                        <h1>31. 5.</h1>
                    </div>

                    <div id="plus">
                        <img id="plus_x" src="plus.png" style="">
                    </div>
                </div>
            </div>

and css..:

#item{
    height: 75px;
    width: 100%;
    background-color: white;
    border-bottom: 2px solid #464646;
}

    .item_roll{
        height: 275px;
    }

.box_rotate {
  -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(45deg);  /* IE 9 */
        -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */
         transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}
.box_transition {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}

#date{
    width: 50%;
    float: left;
}

#plus{
    width: 75px;
    height: 75px;
    float: right;
    padding: 22.5px;
}

Hope, you now have maximum information to fix my problem. Of corse, THERE is link to my website, so at the bottom of the page, check that out, try it... Please help me

Thanks

NOTE!

Looks pretty weird in Edge, don't know why....

• javascript
• jquery
• html
• css

2 Answers 2

The id attribute in HTML must have unique values, you cannot repeat the same id value for different elements like you do.

To solve this, replace these id="plus_x" attributes by class="plus_x" and do your each on $(".plus_x") selector.

However, you have the same problem with other id properties with values item, date and plus, so you need to also solve that in a similar way, also in you CSS.

Finally, for your purpose it is not necessary to do a each, as you can define a click handler for all matches in one go. You'll need to find the .item belonging to the clicked item, which you can do with .closest():

$(".plus_x").on("click", function(){
    console.log("CLICK!");
    $(this).toggleClass("box_rotate box_transition");
    // get ancestor that has "item" class:
    var $item = $(this).closest(".item");
    $item.delay(250).animate({
        height: $item.hasClass("open-panel") ? '75px' : '300px'
    });
    $item.toggleClass("open-panel");
});

The error occurs because you declared the same ID ('plus_x') for several elements. The 'click' handler is applied to the first element with that ID and the others are ignored. You can target only one element by its ID.

To fix this, change the id attribute declaration for the <img> elements to a class attribute declaration:

<img class="plus_x" src="plus.png" style="">

Then, change the selector to target all the elements with that class:

$(".plus_x").each(function() {