Image spin depending on which div has been clicked

Question

I've made divs to display only when their header div is clicked with a toggle on when one is shown the others aren't.

My problem is adding an image that rotates for the correct div that's been clicked at the moment it's only the first image in the first div that rotates, without giving them all their own names & ids, I'm wondering how to differentiate them as I'm a beginner at JS.

Here is my script:

<script>
$(document).ready(function() {                     
        $('a.box').click(function(event){
            event.preventDefault();
            var sliderContent = $(this).next('.sliderContent');
            $('.sliderContent').not(sliderContent).hide();

            var element = document.getElementById('spin');
            if (element.className === "normal") {
                element.className = "rotate";
            }
            else if ( element.className === "rotate") {
                element.className = 'normal';
            }

            sliderContent.toggle();
        });
        $('.closeButton').click(function(){
            $(this).parent().hide();
        });
    });
</script>

And the full version: https://jsfiddle.net/ks5nL55k/

I would suggest not using multiple the same `id`. You should use `class` instead. Further read here: https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme — threeFatCat, May 31 '17 at 16:24

Sandeep Nayak · Answer 1 · 2017-05-31T16:43:08.263

You are almost there. Since you have same id's , I have done it this way:

Instead of fetching element by id which only returns the first element with that id, do this instead

var element = $(this).find("img")[0]; // target the <img> tag inside the clicked header

$(document).ready(function() {
  $('a.box').click(function(event) {
    event.preventDefault();

    $("a.box").not(this).each(function() {

      var sliderContent = $(this).next('.sliderContent');


      var element = $(this).find("img")[0];

      if (element.className === "rotate") {
        element.className = 'normal';

        sliderContent.toggle();
      }




    });
    var sliderContent = $(this).next('.sliderContent');
    $('.sliderContent').not(sliderContent).hide();

    var element = $(this).find("img")[0];

    if (element.className === "normal") {
      element.className = "rotate";
    } else if (element.className === "rotate") {
      element.className = 'normal';
    }

    sliderContent.toggle();
  });
  $('.closeButton').click(function() {
    $(this).parent().hide();
  });
});

.sliderContent {
  border: 5px solid #fff;
  background-color: #FC9;
  padding: 10px;
  min-height: 150px;
  display: none;
  margin-top: 5px;
}

.sliderContent a {
  padding: 0 !important;
  border: none !important;
}

.sliderHead {
  width: 100%;
  padding: 8px;
  border-bottom: 1px solid #CCC;
  font-size: 20px;
  font-family: Verdana, Geneva, sans-serif;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
}

.rotate {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.normal {
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" style="text-decoration : none" class="box">
  <div class="sliderHead">Question 1 <img src="https://image.ibb.co/jZcCSa/slider_Close.png" style="float:right;" id="spin" class="normal" /></div>
</a>
<div class="sliderContent">
  Lorem Ipsum Doner 1
</div>

<a href="#" style="text-decoration : none" class="box">
  <div class="sliderHead">Question 2 <img src="https://image.ibb.co/jZcCSa/slider_Close.png" style="float:right;" id="spin" class="normal" /></div>
</a>
<div class="sliderContent">
  Lorem Ipsum Doner 2
</div>

<a href="#" style="text-decoration : none" class="box">
  <div class="sliderHead">Question 3 <img src="https://image.ibb.co/jZcCSa/slider_Close.png" style="float:right; " id="spin" class="normal" /></div>
</a>
<div class="sliderContent">
  Lorem Ipsum Doner 3
</div>

Updated Fiddle

Wow thanks! And if you click another div how can I make it spin back to normal, for example if I open 3 then open 1 both are open on the image. — , May 31 '17 at 16:22
@Beth: Updated the answer to include this change. Now only one content can be open at any given point in time — Sandeep Nayak, May 31 '17 at 16:28
wow great! is it possible however to be able to still close the div thats open if it is clicked twice, so that all divs can be closed at the same time, like div 3 in your last example or in my first example? Also div 3 in last example acts different to other divs? — , May 31 '17 at 16:31
@Beth: Sorry for the confusion. See the updated answer. It is working . All use cases considered — Sandeep Nayak, May 31 '17 at 16:43

Nicolay Hekkens · Accepted Answer · 2017-05-31T16:57:06.363

0

$(document).ready(function() {                     
    $('a.box').click(function(event){
        event.preventDefault();
        var sliderContent = $(this).next('.sliderContent');
        $('.sliderContent').not(sliderContent).hide();

        if ( $(this).find('img').hasClass('rotate') ) {
            $(this).find('img').toggleClass('rotate');
        } else {
            $('img.rotate').removeClass('rotate');
            $(this).find('img').toggleClass('rotate');
        }

        sliderContent.toggle();
    });
    $('.closeButton').click(function(){
        $(this).parent().hide();
    });
});

edited May 31 '17 at 16:57

answered May 31 '17 at 16:32

Nicolay Hekkens

530
5
18

Thanks alot - this works great too, the only thing is that if another div is clicked for example div 3 is clicked while div 1 is open the image doesnt reset to normal is this possible / easy to do or am I better giving each image it's own id? – May 31 '17 at 16:35
Yea that's easy, I would suggest changing your HTML / CSS. CSS : make it that .normal ( is positioning ) and .rotate is the rotate(). So if you have an image with both classes it rotates. HTML: Remove the ID from images. Then use the updated code above. – Nicolay Hekkens May 31 '17 at 16:38
Can you show me on fiddle what I would need to change to make this possible? – May 31 '17 at 16:40
1

updated, just remove the styling for .normal in your CSS and use the above JS – Nicolay Hekkens May 31 '17 at 16:44
https://jsfiddle.net/u1ma5zxz/1/ There is a fiddle working. Also alot less code. – Nicolay Hekkens May 31 '17 at 16:47
Its amazing how minimalistic code it is now! if the same div is clicked twice however? – May 31 '17 at 16:48
Wow thanks alot and really clean thanks for the help! – May 31 '17 at 16:57

Image spin depending on which div has been clicked

2 Answers2