Attempting to change the appearance of my jQuery arrow image when toggling the visibility of content

Question

Attempting to change the appearance of my jQuery arrow image when toggling the visibility of content

Here is a sample of my JQuery code:

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

Below is the corresponding 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>

I am trying 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 attempted various Jquery methods but have not found success.

Additionally, I would like to have a visible border-bottom that remains constant and moves with the hidden content. The border should be positioned below the title when hidden and below the content when visible. However, all my attempts have resulted in double borders. Any suggestions on how to achieve this would be greatly appreciated.

jquery html css toggle

Answer 1

Answer №1

Here is a solution you can use to achieve your goal:

$(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>

You may also want to consider using bootstrap collapse, as it is highly recommended!

Answer 2

Here is a solution you can use to achieve your goal:

$(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>

You may also want to consider using bootstrap collapse, as it is highly recommended!

Answer 3

Answer №2

If you're looking for a straightforward method, you can utilize the built-in jQuery function called .css(). There's no need to swap out the image entirely.

Here's a suggestion:

$(".neverseen img").click(function() {
    $(this).css("transform", "rotate(180deg)"); // This will rotate the image 180 degrees upon clicking
    $(".neverseen p").slideToggle("slow");

    return false;
});

UPDATE: For a consistent outcome and adding a bottom border dynamically using jQuery, you could try something similar to 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;
});

Moreover, in your CSS file:

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

Answer 4

If you're looking for a straightforward method, you can utilize the built-in jQuery function called .css(). There's no need to swap out the image entirely.

Here's a suggestion:

$(".neverseen img").click(function() {
    $(this).css("transform", "rotate(180deg)"); // This will rotate the image 180 degrees upon clicking
    $(".neverseen p").slideToggle("slow");

    return false;
});

UPDATE: For a consistent outcome and adding a bottom border dynamically using jQuery, you could try something similar to 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;
});

Moreover, in your CSS file:

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

Attempting to change the appearance of my jQuery arrow image when toggling the visibility of content

Answer №1

Answer №2

Similar questions

Add a parameter to the iframe that is dynamically loaded into the DOM after a user clicks on

Apply the style when the page loads and remove it when clicked

Methods for animating .jpg images using CSS

What could be causing my SVG bezier curves to malfunction in Firefox?

Use jQuery to change the background color when clicked

Displaying an array of data from a list of arrays in AngularJS' session storage

Troubleshooting: Issue with Nested jQuery UI Accordion Implementation

Creating a custom Vue.js component for specific table cells within a table row - here's how!

Unable to accommodate additional space, InputGroup is not utilizing the

Incorporate dc.js into your Cumulocity web application

I am having trouble setting a component to show up as inline-block in Angular2

Are there methods to individually style components that have been generated through the .map() function?

Should the refresh button be displayed once the animation finishes?

Tab buttons that switch between different sections with just a click

I require the capability to retrieve JSON data from beyond the confines of the function

use jquery to highlight a table row based on the current hour

Error message indicating that the function 'slice' is not defined for the data variable

Having trouble with the DataTables jQuery plugin? Seeing a blank page instead of the expected results?

A step-by-step guide on showcasing three post images in separate divs at the bottom of a webpage with Reactjs and Css

Displaying empty values as zeros