Update the icon within the expandable display

Is there a way to change the plus sign to a minus sign in an expandable table view on click? (changing fa fa-plus to fa fa-minus) The goal is to have the plus sign displayed when the view is compressed and the minus sign displayed when it is expanded. If you have a solution, please share your code on this fiddle.

 <script>
    $(document).ready(function(){
        $("#report tbody tr:odd td:first-child").click(function(){
            $this=$(this);
            $this.parent().next("tr").toggle();
            $this.find(".arrow").toggleClass("up");
        });
    });
        </script>

       <table id="report" border="1" style="width:100%" >
        <tr>
            <th> First </th>
            <th> Second </th>
            <th> Third </th>
        </tr>

        <tr>
             <td><i class="fa fa-plus"></i></td>
             <td>1</td>
             <td>1</td>
        </tr>   
        <tr>
            <td colspan="10">
                dummy text 1<br>
                dummy text 1<br>
                dummy text 1<br>
            </td>
        </tr>   
    </table>
javascriptjquerycss

Answer №1

To easily achieve this, utilize both icons with the display:none and display:block properties by assigning them a common class and then toggling between them.

Check it out in action

Answer №2

Make sure to add a specific class to the parent element to easily identify when it has been expanded. When the element is expanded, hide the plus icon and display the minus icon, and vice versa.

$(document).ready(function() {
  $('.toggler').click(function() {
    $(this).toggleClass('active');
  });
});
.toggler {
  padding: 3px 5px;
  border: 1px solid #ddd;
  float: left;
}
.icon-minus {
  display: none;
}
.active .icon-plus {
  display: none;
}
.active .icon-minus {
  display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggler">
  <span class="icon icon-plus">+</span>
  <span class="icon icon-minus">-</span>
</div>

Answer №3

After my thorough investigation, it appears that there is no arrow class element present, but it seems like you want to switch between the classes fa-plus and fa-minus when toggling between collapse and expand. To achieve this functionality, you can use the following code snippet:

$(document).ready(function(){
     $("#report tbody tr:odd td:first-child").click(function(){
         $this=$(this);
         $this.parent().next("tr").toggle();
         $this.find("i").toggleClass("fa-plus fa-minus");
         //Toggle between fa-plus and fa-minus classes of the "i" element found in td
    });
});

Check out the DEMO here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Auth0 not properly redirecting to the designated URL in a React application

auth.js import auth0 from 'auth0-js'; export default class Auth { constructor() { this.auth0 = new auth0.WebAuth({ domain: '<properURL>', clientID: '<properID>', re ...

javascriptreactjsreact-routerauth0

The element remains stationary and does not shift positions

My form is not centralizing properly, it seems to be stuck to the left side of #wrapper. I've tried adjusting margin-top but it doesn't seem to affect its horizontal position at all. I've played around with different values for margin and ev ...

htmlcss

"A validation error occurred in the ABC Ajax request in an Asp.net application due to invalid

Here is my script: <script type ="text/javascript"> $(document).ready(function () { $('#<%=Button1.ClientID %>').click(function () { var ABC = 'TEST'; $.ajax({ type: ...

c#jqueryasp.netajax

The CSS media query isn't functioning properly on Safari browser

Currently, I am working on a project using React JS and CSS. In order to make it responsive, I have implemented media queries. However, I have encountered an issue where the media query is not functioning properly in Safari browsers on both phones and PC ...

cssreactjssafariresponsive-designmedia-queries

Sending an XMLHttpRequest in PHP causes a blank array to be returned

> xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var jsondata = xmlhttp.responseText; console.log(xmlhttp.responseText); document.getElementById("jsondata").value = js ...

javascriptphpajax

Finding the correct index number for the active class - a step-by-step guide

I am currently troubleshooting an issue with my demo. I am having trouble retrieving the correct index number of .carousel-item.active. Even when the second slide is displayed, I continue to receive the index of the first slide. var totalItems = $(&apos ...

javascriptjquerybootstrap-5bootstrap-carousel

Ensuring that EJS IF/ELSE statements are evaluated accurately

I am encountering an issue where my variable 'answer' is returning the string 'success' and displaying correctly in the view. However, the IF/ELSE statement always seems to evaluate to the ELSE condition and displays 'no' inst ...

javascriptnode.jsejs

The AngularJS $http.post method mimicking a successful $.ajax request is causing a 401 UNAUTHORISED error

I have been working on rewriting a functional $.ajax server call to utilize AngularJS $http.put. However, the $http method returns a 401 unauthorized error. The original ajax call I am attempting to rewrite is structured like this: $.ajax({ url: domain ...

javascriptajaxangularjshttp-headers

Hide the menu when a menu link is selected

After conducting extensive research, I have come across several scripts that can achieve what I am trying to do. However, I am unsure of how to implement them with my particular WordPress theme. Therefore, I am seeking assistance here: The theme I am usin ...

javascriptjqueryhtmlwordpress

The ng-view DIV in Angular JS 1.x mysteriously vanishes

Currently, I am working on a project that involves angularJS and ASP.NET in Visual Studio 2013. However, I have encountered a frustrating issue where my DIV node for ng-view is being replaced with an ng-view comment without any errors appearing while testi ...

javascriptangularjs

Using async functions with Vue.js

In my Vue.js component, I have the following code snippet: module.exports = { data: function () { return { searchText: "", searchResult: [] } }, watch: { searchText: function() { ...

javascriptvue.js

Balanced Columns with Background Extending Beyond Half of the Page

If you're looking for the final code, it can be found here: http://jsfiddle.net/asaxdq6p/6/ I am attempting to create an effect similar to this image: To achieve this, I am using the Equal Height Columns with Cross-Browser CSS trick as described in ...

htmlcssbackgroundfluid-layout

I'm wondering why my element is aligning itself with its sibling. It seems that when the parent has overflow set to hidden, it causes the children's

Let me break down the diagram below for you: The main box is marked in yellow and serves as the parent element. Within this parent box, there are two child elements, one in black and one in cyan. To hide any excess content of the cyan box that overfl ...

htmlcssoverflowmargin

What is the best method for extracting the innerHTML value of html tags using a css selector or xpath?

I am currently struggling with retrieving the HTML inner text value using CSS selector or XPath. While I can achieve this using document.getElementById, I am unable to do so using selectors. I can only print the tag element but not the text from it. For e ...

javascripthtmlcssxpathcss-selectors

Playing back an Audio object using JavaScript

I'm facing an issue with replaying an audio sound every time the game starts in my Cocos2d javascript code. The sound plays correctly the first time, but subsequent attempts to play it result in no sound being heard. Below is my code snippet: var my ...

javascripthtmlcocos2d-iphone

Easily generate a hierarchical layout in HTML with this straightforward method

I'm currently working on implementing a hierarchical tree structure for a website. I need to organize a user's projects, tasks, and sub-tasks in a visually appealing manner using HTML elements. Any suggestions or creative ideas are welcome! ...

c#htmlcssvisual-studio

The mouseenter event in jQuery is failing to trigger

I'm encountering an issue with the mouseenter event on a div section of my webpage. I am attempting to alter the background color of this div when the mouse enters, but it seems to be disregarded. This is the basic HTML code: <div id="services" c ...

javascriptjquerycsshtml

Having trouble getting the "save adjustments" button to become enabled after using the jQuery datepicker

It's puzzling that my code doesn't respond to the selection of a date using the jQuery date picker to re-enable the "save changes" button. Interestingly, changing values in other input boxes seems to work perfectly fine. I'm struggling to gr ...

javascriptjqueryjquery-uidomdatepicker

jquery expanding the width of the final element

Is there a way to increase the width of the last 'th' in a string? I want it to be the current width plus 20px. Here is the code on Fiddle var header="<th id='tblHeader_1' style='width: 80px;'><span>Id</span&g ...

javascriptjqueryhtmlcsstableheader

unable to display images from a folder using v-for in Vue.js

Just getting started with Vuejs and I have two pictures stored on my website. The v-for loop is correctly populating the information inside databaseListItem. The path is /opt/lampp/htdocs/products_db/stored_images/cms.png https://i.stack.imgur.com/969U7.p ...

javascripthtmlvue.js