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

The height of divs spontaneously changes after resizing without any instructions

Struggling to retrieve a JSON object from an Express and Node application, only receiving an empty result

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

CSS must be applied to various sections of an HTML document

Change the font awesome class when the button is clicked

"Encountering an 'Undefined function' error while implementing AJAX in the code

arrangement of form labels in material-ui

Button for Toggling Audio Play and Pause

designing a presentation with customizable durations for each slide

Can object methods be called using inline event attributes in an HTML tag?

Exploring the best practices for integrating Bootstrap into a Webpack and Angular2 project

Having trouble unchecking a checkbox in reactjs?

Is it possible to add data in MongoDB without specifying a field name?

What is the best way to loop through <div> elements that have various class names using Python 3.7 and the Selenium webdriver?

"Activate the mat-checkbox based on the outcome of a certain process

How come my keyframes animation isn't functioning properly on my div element?

Utilizing a modal for Wordpress search queries

What is the process for applying cdkDropList to the tbody when using mat-table instead of a traditional HTML table?

Having difficulty retrieving the value of a dynamically selected radio button in AngularJS

Creating tiles that can be easily stacked to the side