CODEWITHSUNDEEP
jqueryhtmlcsstoggle
Peterssoen
Peterssoen

Reputation: 167

Trying to make my jquery arrow img change to different arrow on Hide/Show content

I have this very simple JQuery 

$(document).ready(function() {
  $(".neverseen img").click(function() {
    $(".neverseen p").slideToggle("slow");
    return false;
  });
});

And this HTML 

<div class="neverseen">
  <h1>Title to always show</h1>
  <a href="#" id="show">
    <img src="images/demo/arrow.png" width="40" height="40">
  </a>
  <p>Text to toggle hide/show</p>
</div>

So what I need is to add another image called arrow2.png that will replace the first arrow when hidden content activates or make the current arrow turn 180 degrees. I have tried different jquery methods but nothing seems to work so well.

Another thing I wish is to have a border-bottom that is visible at all times and moves with the hidden content so the border is below the title on hidden and below the content on visible, whatever I am doing here results in double borders.

Upvotes: 1

Views: 1413

Answers (2)

Teuta Koraqi
Teuta Koraqi

Reputation: 1898

You have different solutions to achieve that, here is one of them:

$(document).ready(function() {
  $(".neverseen img").click(function() {
   $(this).parent().toggleClass("active");
   $(".neverseen p").slideToggle("slow");
     return false;
    });
});
img {
  width: 50px;
}

#secondImage {
  display: none;
}

.active #firstImg {
  display:none;
}

.active #secondImage {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="neverseen">
<h1>Title to always show</h1>
<a href="#" id="show">
<img id="secondImage" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSWdFg2vU1YX0W8HGMurPjTOSsOf8rwadUWNwPV6I_7NsDJ3nnURSSzIcw" width="40" height="40">
 <img id="firstImg" src="https://image.freepik.com/free-icon/arrow-top-ios-7-interface-symbol_318-34757.jpg" alt="">
</a>
<p>
  Text to toggle hide/show <hr class="to-be-hidden">  
  </p> 
</div>

I would suggest you to use bootstrap collapse, it is really amazing!

Upvotes: 1

GROVER.
GROVER.

Reputation: 4378

Fairly simple procedure using jQuery's native .css() function. No need to substitute with a completely different image

Try this instead:

$(".neverseen img").click(function() {
    $(this).css("transform", "rotate(180deg)"); // rotate the image 180 degrees once it has been clicked
    $(".neverseen p").slideToggle("slow");

    return false;
});

EDIT: to achieve a continuous result & the bottom border, within your jQuery try something like this:

$(".neverseen img").click(function() {
    $(this).toggleClass("open");
    $(".neverseen p").slideToggle("slow");

    if($(this).hasClass("open")){
        $("h1").css("border-bottom", "none");
        $(this).css("border-bottom", "1px solid black");
    } else {
        $("h1").css("border-bottom", "1px solid black");
        $(this).css("border-bottom", "none");
    }

    return false;
});

and then, inside of your CSS:

h1{
    border-bottom: 1px solid black;
}
.neverseen img{
    transform: rotate(0deg);
    transition: transform 500ms; // rotate for 500 milliseconds
}
.open{
    transform: rotate(180deg);
}

Upvotes: 0

Related Questions