Switch the icon when clicking to expand the container div

Currently, I am experimenting with Jquery slideToggle using the tutorial found on the W3Schools website. I am interested in changing the + icon to a - icon when the Panel div is expanded. Can anyone provide me with guidance on the correct approach?

I am inspired by the functionality seen on this website: 

$(document).ready(function(){
    $(".flip").click(function(){
        $(".panel").slideToggle("normal");
        $(".flip").toggleClass('fa-plus-circle fa-minus-circle')
    });
});
.panel, .flip {
    padding: 2px;
    text-align: center;
}

.flip:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    margin-left: 5px;
}


.panel {
    padding: 10px;
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">I am hidden.</div>
 
<div class="flip"></div>

jqueryhtmlcss

Answer №1

If you're attempting to toggle icons from FontAwesome, it's important to note that the initial plus sign in the :after pseudo-class for .flip should be replaced with a default class of fa and fa-plus. The classes fa-plus-circle and fa-minus-circle are not valid FontAwesome classes; opt for fa-plus and fa-minus instead when using the jQuery .toggleClass().

By placing the icon on .flip instead of :after, you'll need to set a width of 100% to horizontally center it. Ensure to include box-sizing: border-box to prevent scrollbars, which is recommended for all elements.

The following code snippet demonstrates these changes:

$(document).ready(function() {
  $(".flip").click(function() {
    $(".panel").slideToggle("normal");
    $(".flip").toggleClass('fa-plus fa-minus')
  });
});
* {
  box-sizing: border-box;
}

.panel,
.flip {
  padding: 2px;
  text-align: center;
  width: 100%;
}

.panel {
  padding: 10px;
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">I am hidden.</div>

<div class="flip fa fa-plus"></div>

Remember to include the FontAwesome library in your project!

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

Ways to target only the adjacent div

My goal is to target only the next div with the class name indented. Each indented div should have the same id as the <li> element right before it. Currently, I want each div with the class name indented to have the id of the previous <li>. He ...

javascripthtmljquery

Error: Json Value missing when attempting to convert datatable to json structure

I am trying to retrieve data from a database and assign it to a dropdown list using jQuery. Here is the jQuery code I am using in the onclick event: function getCountry() { try { $.ajax({ type: "POS ...

asp.netjqueryweb-services

When the radio button is selected, show a variety of buttons

I'm facing an issue with rendering different buttons for two radio buttons within a view. Here is the rendered HTML code for the radio buttons: <input checked="checked" id="Isattending_0" name="Isattending" type="radio" value="Yes" /> <inpu ...

javascriptjqueryhtmlasp.net-mvc

Can you please tell me the term used to describe when a background adjusts and follows the movement of a mouse cursor?

Just wrapped up freeCodeCamp's HTML & CSS Responsive Web Design course and noticed a cool feature in some portfolios that I'd like to learn. However, I'm not sure what it's called. Here are some examples: The video game Escape From Ta ...

htmlcssimagebackgroundcursor

What are the steps to create two adaptable blocks and one immovable block?

Check out this HTML code snippet: <div style="border: 1px solid #000; width: 700px; line-height: 38px; display: block"> <div style="margin-left:10px;width: 222px; float: left; margin-right: 10px;"> Enter your question </div& ...

htmlcss

Eliminate the bottom padding on the body in your HTML and CSS code

My Unique Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <style> /*RESET BLOCK START ------------------------------------------------------------------------------------------------------------------*/ ...

htmlcssflexbox

SecurityError: The dubious operation triggers CORS to persist in its insecurities

I have developed an HTTP server using Express in Node.js. This server is currently running locally on port 3000. There is a served HTML page called "index.html" which makes AJAX GET requests for contents (in HTML format). These AJAX contents are also serv ...

javascriptjqueryajaxnode.jscors

Is there a way to ensure that the JSON data and the image appear on the same row with some spacing between them?

Trying to display JSON data with images and text side by side but facing issues where the text wraps below the image instead. How can I fix this layout to show text next to the image? Flex-wrap property doesn't seem to work as expected. function for ...

htmlcss

Eliminate the hover effect from every element

Is there a method in CSS or Javascript that allows me to eliminate the hover effect on all elements? I am specifically looking for a solution that will disable the hover effect on mobile devices while keeping it intact on desktop. I attempted using pointer ...

javascripthtmlcss

What is the best way to include and control persistent URL parameters when making Ajax requests?

Imagine having two different resource lists on your website: one for users and the other for groups. As you navigate through each list in increments of 10, it's important to preserve the state of the list so that when you share the URL with someone el ...

javascriptjqueryajaxanchor

Issue with exchanging columns in Bootstrap version 5.0

Seeking assistance! I am a beginner with bootstrap and struggling to figure out an issue I'm experiencing. In the attached image(s), my goal is to have the coin image positioned above its corresponding text on the left side when the screen size is red ...

cssbootstrap-5

Element with absolute positioning inside a relative parent does not interfere with other elements outside of the parent

I am currently facing a challenge with a simple dialog that is positioned absolutely in the center of the screen. Inside this dialog, there is a dropdown with a relatively positioned parent (I want the dropdown to follow its parent's position without ...

jquerycss

HTML - various incorrect horizontal alignments

I'm having trouble getting the site logo, site name, and site header to align horizontally on my website. They keep ending up in different places.https://i.stack.imgur.com/5yL5f.jpg I'd like it to look similar to this: https://i.stack.imgur.com/ ...

htmlcss

Collapsing Bootstrap menu bar causing logo overlap

When the navbar collapses (when it shows the toggle icon), the menu items (home, services, portfolio, about, contact) overlap with the logo. If I remove the position:absolute from the logo (navbar-brand), the menu appears in the center. Is there a way to h ...

javascriptjqueryhtmlcsstwitter-bootstrap

How to position a centered div with a background image on a webpage

I am trying to achieve a centered layout for a div and its content on a webpage. The div includes a background image. Here is my approach using Flexbox: <head> <style> .flex_container { display: flex; flex-d ...

htmlcssflexbox

JavaScript and jQuery radio button matrix group implementation

I'm feeling completely lost when it comes to solving this problem. My task is to create a matrix of radio buttons with columns labeled 1 to 3 and rows labeled A to C. A B C 1 (o) (o) (o) 2 (o) (o) (o) 3 (o) (o) (o) <tabl ...

javascriptjquerymatrixradio-button

Can you explain the significance of this %s value?

While going through some code, I found this: form method='post' input type='hidden' name='input' value='%s' I'm puzzled about the meaning of %s. I attempted to search online for an answer but couldn't fin ...

phphtml

Simplify code by eliminating uuid references

Greetings! I am currently working with some code that is generated within a JSP tag and utilizes the jQuery data function to connect data with a div element. In order to link the jQuery script with the div on the webpage, I have employed a UUID. However, ...

javajavascriptjqueryjspjsp-tags

What are the risks of using react + bootstrap without importing bootstrap.js?

When bootstrap library is used along with React, potential unpredictable behavior and difficult bugs may arise due to DOM modifications. Is it feasible to use bootstrap without including bootstrap.js? What are the drawbacks? While I am aware of the ' ...

javascriptcsstwitter-bootstrapreactjsreact-bootstrap

Retrieving Dynamic data from an HTML form and saving it in PHP variables

Currently, I am in the process of taking an online aptitude test where 2 random questions are selected from a database and displayed on the webpage for answering. The issue I'm facing is that the values are not being stored correctly in the database. ...

phphtmlmysqlsqldatabase