Switching image display through data toggle

<a href="#demo1"  data-toggle="collapse"><h3 style="color:#0F77CD;">Form</h3></a>
<div id="demo1" class="collapse">
  <asp:CheckBox ID="CheckBox1" runat="server" Text="Capsules" /><br /><br />
  <asp:CheckBox ID="CheckBox6" runat="server" Text="Combo Pack" /><br /><br />
  <asp:CheckBox ID="CheckBox7" runat="server" Text="Kit" /><br /><br />
  <asp:CheckBox ID="CheckBox8" runat="server" Text="Gel" /><br /><br />
</div>

I am looking to enhance the code above by adding a toggle image with a minus and plus icon. The purpose is to have the minus icon displayed when the toggle is expanded, and the plus icon displayed when the toggle is collapsed.

javascriptjqueryhtmlcss

Answer №1

Check out the solution I found using bootstrap v3 here

$('a').click(function(){
  if($(this).find('i').hasClass('fa-plus')){
    $(this).find('i').removeClass('fa-plus').addClass('fa-minus');
  } else {
    $(this).find('i').removeClass('fa-minus').addClass('fa-plus');
  }
});
h3 {
  display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="#demo1"  data-toggle="collapse">
  <i class="fa fa-plus" aria-hidden="true"></i>
  <h3 style="color:#0F77CD;">Form</h3> 
</a>
<div id="demo1" class="collapse">
  <input type="checkbox" ID="CheckBox1" runat="server" Text="Capsules" /><br /><br />
  <input type="checkbox" ID="CheckBox6" runat="server" Text="Combo Pack" /><br /><br />
  <input type="checkbox" ID="CheckBox7" runat="server" Text="Kit" /><br /><br />
  <input type="checkbox" ID="CheckBox8" runat="server" Text="Gel" /><br /><br />
</div>

I trust this information will be of assistance to you.

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

Send FormData as JSON object array using ReactStrap Form and Express server

Currently in the process of learning the MERN stack, I find myself navigating through React and Express for the first time. One of my tasks involves utilizing an API that I had previously set up to update JSON data using React. To accomplish this, I' ...

javascriptreactjsjsonexpressform-data

Learn how to integrate ES6 features into your nodejs/expressjs application using either Gulp or Webpack

I am looking to incorporate ES6 features into my nodejs/expressjs application. Currently, I am using Gulp for JavaScript compilation and setting up live reload. What steps do I need to take in order to compile the es6 code to standard js within my exis ...

javascriptnode.jsgulpecmascript-6webpack

Reducing text size upon cell selection in Material UI Table

Seeking assistance in identifying the CSS property responsible for subtly shrinking text within cells when selected To see the issue, simply click on a cell in this code sandbox: https://codesandbox.io/s/material-ui-table-virtualized-t2xkt IMPORTANT: se ...

cssreactjsmaterial-ui

Eliminate the JavaScript code from within the HTML document

Need help with a C# regular expression to remove JavaScript from HTML. Can anyone assist me in writing the code? ...

javascript

Exploring the potential of ajax with multiple dropdown menus

As I work on developing my portfolio page, I've implemented filters to help users organize the list of projects. These filters consist of dropdown menus like this: <select name="category" id="filter-category" class="chosen-select"> <o ...

phpjquerymysqlajax

Removing a specific MySQL row using HTML in collaboration with Node.js

I've been working on a feature to allow users to delete specific rows from a table. Each row has a "Delete" link at the end, but when I click it, nothing happens. There are no errors displayed, and the console shows that 0 row(s) have been updated, ye ...

javascripthtmlmysqlsqlnode.js

Automated updating of Google Map markers

I am looking for a way to continuously update the marker on my Google Map to reflect my current position every 15 seconds using Jquery. Can anyone provide guidance on how to achieve this? Here is my code snippet: var x=document.getElementById("message"); ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Customize background images for the ::after and ::before pseudo elements that span the full height of the webpage

I've successfully centered a <div class="page"> element on my page, and now I'm attempting to add two background images that run along the left and right edges of this container. So far, I've utilized the .page::before and .page::afte ...

htmlcss

Utilizing useEffect Hooks to Filter Local JSON Data in React Applications

For my engineering page, I have been developing a user display that allows data to be filtered by field and expertise. Fields can be filtered through a dropdown menu selection, while expertise can be filtered using an input field. My initial plan was to ...

javascriptreactjsjsonreact-hooksfiltering

jQuery smooth scrolling problem causing a one-second page "blinking" issue

Currently, I have implemented a smooth scrolling effect on my website using the following jQuery code: jQuery('html,body').animate({scrollTop:scrollTarget}, 1000, "swing"); Although the effect works well in general, I have noticed that when mul ...

javascriptjquerycss

TS: How can we determine the type of the returned object based on the argument property?

Assume we have the following data types type ALL = 'AA' | 'BB' | 'CC'; type AA = { a: number; }; type BB = { b: string; }; type CC = { c: boolean; }; type MyArg = { type: ALL }; I attempted to create a mapping between type n ...

javascripttypescriptgenerics

Chrome not triggering the fullscreenchange event

I've been attempting to track when the browser goes into fullscreen mode. Everywhere I look, this blog is mentioned as the go-to resource on the fullscreen API. According to this SO answer, it should work. Fullscreen API: Which events are fired? B ...

javascriptjquerygoogle-chromefullscreen

Tips for setting up a hierarchical mat-table within a parent table that supports expandable rows using Angular Material

Here is the data that I am working with: [ { "_id": "c9d5ab1a", "subdomain": "wing", "domain": "aircraft", "part_id": "c9d5ab1a", "info.mimetype": "application/json", "info.dependent": "parent", ...

javascripthtmlangulartypescriptangular-material

Tips for concealing divs when hovering over them

I have designed a header for my website with the following styles: .header-cont { width:100%; position:fixed; top:0px; } .header { height:50px; background:#F0F0F0; border:1px solid #CCC; width:950px; margin:0px auto; } .hea ...

htmlcssheader

Issue with Ajax-Enabled WCF Service (JSON) encountered during utilization with jquery .ajax()

Regrettably, the error condition is only triggered when calling .ajax(), and textStatus (the second parameter) merely displays "error". Despite thoroughly examining multiple examples and other inquiries on stackoverflow, I seem to be overlooking something ...

c#jqueryajaxwcf

Basic math tool using JSP/Servlet combination and Ajax

I have a follow-up question to my previous inquiry on Stack Overflow. I believe this topic deserves its own discussion due to the thorough response I received. My goal is to develop a straightforward calculator using JSP. The calculator will include two t ...

javajavascriptajaxjspservlets

What are the best practices for utilizing the onLeave() function in fullpage.js?

My goal is to make the user scroll through 4 sections. Upon reaching the fourth section, if the user scrolls down again, instead of going to the fifth section, the view should loop back to the first section. (The fifth section only contains the imprint and ...

jqueryhtmlcssfullpage.js

The key to crafting the perfect container rests in getting the dimensions, height settings, and footer just right for showcasing the figure with an icon and Font

I am currently tackling one of the bootstrap challenges and I find myself at the final stage where I am working on completing the landing page. However, I have encountered a few minor issues with the container in the div as well as the footer. My main con ...

htmlcssbootstrap-4

Error throwing when attempting to use additional plugins in Angular CKEditor

I have been attempting to utilize the angular ckeditor extension found at: https://github.com/lemonde/angular-ckeditor UPDATE: I have already injected 'ckeditor' into the app modules. Within my partial html, I am including the following direc ...

javascriptangularjsckeditorwysiwygmathjax

The width of the TD element does not affect the grid

<div id="unique-example" class="k-unique-content"> <table id="unique-grid" style="float: left; position: relative"> <thead> <tr> <th width ="410px"data-field="UniqueFileName">Unique File Name ...

htmlcssrazor