A tutorial on how to switch out a font-awesome icon simply by clicking on it - collapsible content

I have some HTML code with a script for my website that allows text to be collapsed or expanded by clicking on a font awesome arrow. I am looking to have an arrow that points up when clicked to collapse the text and points down when clicked to expand the text. Any help on this would be greatly appreciated!

<head>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
    <script>
        $(document).ready(function() {
            $("#toggle-button").click(function() {
                $("#collapse").toggle();
            });
        });
    </script>
</head>

<h2 style="font-family: times-new-roman; font-size: 33px; text-align: center; color:rgb(85,174,249)">BIOGRAPHY</h2>
<div id="collapse" class="biography-box" style="display:none">
   <p>Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation").
   </p>
</div>
<button id="toggle-button" class="btn btn-info" style="color: black; background-color: transparent; border: none; font-color: black; width:778px" type="button">
<i class="fa fa-angle-double-down"></i>
</button>

For a more detailed view, here is an additional code snippet:

<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script>
$(function() {
    $("#toggle-button").click(function() {
        var i = $(this).find('i');
        if ($("#collapse").is(':visible')) {
            i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down');
            $("#collapse").slideUp(400);
        } else {
            i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
            $("#collapse").slideDown(400);
        }
    });
});

</script>
</head>

<!-- Additional content to enhance the biography section -->

Answer №1

To achieve this functionality, you can use the removeClass() and addClass() functions as shown below:

$(function() {
    $("#toggle-button").click(function() {
        var i = $(this).find('i');
        if ($("#collapse").is(':visible')) {
            i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down');
        } else {
            i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
        }
        $("#collapse").toggle();
    });
});

You can view the demo on JSFiddle: http://jsfiddle.net/r38ewyue/

UPDATE:

If the above code doesn't work on your Wordpress site, you can try an alternative method:

$(function() {
    $("#toggle-button").click(function() {
        var i = $(this).find('i');
        if ($("#collapse").is(':visible')) {
            i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down');
            $("#collapse").slideUp(400);
        } else {
            i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
            $("#collapse").slideDown(400);
        }
    });
});

You can view this alternative solution on JSFiddle: http://jsfiddle.net/L0stLym2/

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

Updating and removing items from a React state using push and pop methods

I am working on a component in React and have the following state: this.state = { Preferences: [] } I am trying to push an element only if it does not already exist in the array to avoid adding duplicate elements. If the element is already ...

What is the best way to connect multiple web pages together?

Hello everyone, I could really use some assistance with a problem I'm facing. As a newcomer to web development, I have a question about navigation bars. I've successfully created a basic webpage with a navigation bar, but now I'm unsure how ...

Develop a responsive image component with flexible dimensions in React

I am currently working on developing a dynamic image component that utilizes the material-ui CardMedia and is configured to accept specific height and width parameters. The code snippet I have is as follows: interface ImageDim extends StyledProps { wid ...

Issue with the <authorization> node in the Web.config file

Whenever I include <authorization>, the page is displayed without the CSS. Does anyone have any thoughts on why this might be happening? Below is my web.config: <?xml version="1.0"?> <configuration> <connectionStrings> <a ...

What is the process for retrieving API information with jQuery's AJAX functionality?

In this code, I am working with a standard dropdown menu containing city names. However, my goal is to use jQuery to retrieve JSON data in an alert box when the selected city is changed - unfortunately, this functionality is not currently functioning. I ...

Steps to retrieve an incorrect fruit when it is located as the initial item within the array

Currently tackling the precourse material for a coding bootcamp and hitting a roadblock with this particular question. Despite my best efforts, I just can't seem to meet one of the 7 conditions required. Let me outline the question, my attempted solut ...

Retrieve an item from a mapped array

Currently, I am using the following code snippet console.log('errors: ' + password.get('errors')); to check the output from password.get('errors'));, and in the console, the response is as follows: List [ Map { "id": "validat ...

Transferring a value via AJAX that has been modified by a previous AJAX call

In my form, users input values which are used to calculate a result. The calculation is performed through AJAX calls triggered by onchange events on the user-edited fields. This process works as expected. However, there is a hidden field that also gets up ...

interrupt the gameplay of fellow participants while engaging in one

I have a webpage where I am using the video.js framework to display multiple instances of <video> players. My goal is to pause any other playing videos when one of them starts playing. In other words, if one video is playing, all others should be pau ...

What is preventing my for loop from reaching the initial index in this visually distinct nested array pattern?

Struggling with rearranging letters in a W shape using arrays. My code seemed to go down instead of reaching level 0. Code snippet: const row = totalLevel =>{ let array = [] for(let i =0;i<totalLevel;i++){ array.push([]) } r ...

Error: The value of 'PlacesService' property is not defined and cannot be read

I am working towards gathering a selection of locations that meet specific criteria by making a "routeRequest" and storing them. To achieve this, I aim to utilize Google Places to search for locations around the central point of my map. let map = new goog ...

Having trouble displaying a local image in CSS using EJS

Hey there, I'm currently working with EJS. In my CSS file, I've added a background image but it's not showing up when the page loads. Strangely, if I use a hosted image, it works perfectly. Here is my directory structure: https://i.sstatic ...

NodeJs Classes TypeError: Unable to access 'name' property as it is undefined

I am currently developing a useful API using Node.js. In order to organize my code effectively, I have created a UserController class where I plan to include all the necessary methods. One thing I am struggling with is how to utilize a variable that I set ...

Tips for incorporating side effects into an observable property?

I am relatively new to Mobx and I need to automatically call a function when this observable array is updated. The observable array: @observable Todos = [] I have many functions to manage this array (addTodo, removeTodo, ...) and I would like to avoid ...

What is the best way to synchronize HTML5 audio playback on different browsers?

When working with audio files in different browsers like Chrome, Firefox, and Safari, I noticed that they seem to start at slightly different timestamps. This discrepancy becomes more pronounced as the audio progresses, with a gap of around 5 seconds after ...

Is the JavaScript file not being stored in the cache?

As I work on optimizing my web application, I am facing a challenge with a javascript file size of approximately 450K even after compressing it. While I intend to redo the javascripting in due time, for now, I need to go live with what I have. Initially, I ...

Tips for incorporating HTML into a Drupal 7 module

I have created a module that accepts user input, validates it, and then displays an image based on the input provided by the user. Below is the code snippet for this functionality: <?php function fisheye_menu() { $items = ...

Issue with generating WebGL shaders

As I embark on creating a basic application in WebGl and JavaScript following online tutorials, I encountered a peculiar issue while working on some fundamental shaders. The function responsible for generating the shader program presents itself as follows: ...

Enhancing Image Quality upon Hovering

Is there a way to prevent the content of the article from moving when an image becomes absolutely positioned? The issue I am facing is that the image overlaps its container with overflow: hidden only when the img is absolute positioned. article { back ...

Significant issue identified with ajax functionality, requiring immediate attention

After executing the code in the console, I expected to see the ajax object with a readyState of 0 (as I aborted the ajax call). However, Chrome is displaying the number 4 in the console instead of 0. This discrepancy is surprising. http://jsfiddle.net/8yC ...