Adding an additional icon to the collapsible header in jQuery Mobile

Is it possible to add an additional icon from fontawesome to the right side of a collapsible header in jQuery Mobile, in addition to the default one on the left? For example:

In this scenario, the default icon would be on the left of "Madrid," and on the right side there would be a star icon with a number indicating a rating. Does anyone have a solution for achieving this?

<div class="ui-collapsible-set">
    <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
        <h3>Madrid encantado<i class="fa fa-star-half-o" aria-hidden="true"></i></h3>
    </div>
</div>

The issue appears to arise when attempting to insert the additional icon within the h3 element that defines the title and content of the header.

javascriptjqueryhtmlcssjquery-mobile

Answer №1

Based on my comprehension of your inquiry, here is what you are seeking

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="ui-collapsible-set">
    <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
        <h3><i class="fa fa-stack-overflow" aria-hidden="true"></i> Enchanted Madrid <i class="fa fa-star-half-o" aria-hidden="true"></i></h3>
    </div>
</div>

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

Having trouble getting the CSS Transform property to be affected by ScrollTop

Hello everyone, I am attempting to create a ball that has a 50% radius and rolls left based on the user's scroll movements. So far, I have successfully made it move left in relation to ScrollTop, but unfortunately, I cannot get the transform property ...

jquerycssjquery-animatecss-animationsscrolltop

Manually sending the form via Ajax for submission

I'm facing an issue where I am trying to utilize ajax to call a servlet upon form submission. However, the ajax call is not being triggered and the page ends up reloading. To solve this problem, I have set up a manual trigger for the form submission, ...

javascriptajax

Enhance the material-table component by incorporating dynamic information into the lookup property

I am currently facing challenges while attempting to dynamically add data to the lookup property in the Material-Table component. The lookup is structured as an object, and you can refer to its definition in the initial example provided here. However, it ...

javascriptreactjsmaterial-table

template strings receive null value

I am currently facing an issue with the execution of certain template literals in my jQuery functions. Although some are functioning as expected, there is a specific block that is not being executed. function viewUserDetails(data) { // retrieves integer v ...

jqueryajaxstringliterals

The element '<selector>' is unrecognized and cannot be found

Before I proceed with my query: I have gone through similar questions with the same title and followed the given advice, but none of it has worked for me. Therefore, I have decided to create a new question. In my Angular project, I have one module and mul ...

javascriptangular

Populate a Dropdown List with AJAX in MVC 4

Within my current view, I have implemented 2 @DropDownListFor Helpers: @using (Html.BeginForm("CreateOneWayTrip", "Trips")) { @Html.ValidationSummary(false); <fieldset> <legend>Enter Your Trip Details</le ...

c#jqueryajaxasp.net-mvc

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 ...

javascripthtmlmp3html5-audio

Submitting information from a single form to two separate URLs

Is it possible to send a post from one form to two different URLs simultaneously? For example, sending POST name data to both process.php and confirm.php at the same time. $(document).ready(function(){ $("#myform").validate({ debug: false, ...

javascriptphpajaxarraysforms

What steps should I take to align my NAV next to each other on the top right of the page?

Can someone help me align my NAV elements next to each other? I am having trouble figuring out how to do it currently. #menu { display: inline-block; position: absolute; right:0; top: 10%; } <ul id="menu"> <nav> ...

htmlcss

The arrangement and hue of elements using CSS styling

I am seeking to create a unique design with a predominantly gray background, accented by a smaller blue background within it. The design concept is illustrated below: <body> <div id= "background_1"> <div id= "background_2"> < ...

htmlcsspositioning

Steps for setting up dart sass on Fedora 37

I'm facing difficulties while trying to install Dart Sass on my Fedora 37 system. Despite following the official instructions and watching several tutorials, I keep encountering an error. According to the official Sass website: You can install Sass ...

csssass

The returned JSON object lacks a specified name

After receiving the JSON data from the server, I noticed an unnamed node within the 'someStuff' object: { "someStuff": { "": { "foo": 0 }, "moreStuff": { "foo": 2 } } } This raises ...

javascriptjqueryjson

Struggling to vertically center a div using the Sticky footer method?

I'm working on implementing the Sticky Footer technique on my website, but I'm running into an issue with aligning my content both horizontally and vertically within the #main section. The problem arises from the fact that the bottom padding is s ...

htmlcss

It is not possible for Jquery to encode JSON data

After retrieving this JSON data from my PHP page, jQuery seems to have trouble decoding it as the result is always null. { "City": [ { "CityID": "1", "CityName": "istanbul" }, { "CityID": "2" ...

phpjqueryajaxjson

Vue.js Ajax call is throwing a bizarre error: TypeError - str.replace function not recognized

Recently, I encountered a puzzling error message: vue-resource.common.js Uncaught TypeError: str.replace is not a function while working on an ajax call to retrieve some data: export default { data: () => ({ recipes: [] }), ready() { ...

javascriptajaxvue.js

Ways to add vertical dimension to an image without distorting it

I'm dealing with an image that has a very high resolution. I've managed to set the width to 100% without any issues, but I'm struggling to find a way to set the height without stretching the image. Here's my HTML: <div class="conta ...

htmlcss

Tips for resolving a sluggish webpage with database content

I am facing an issue with one specific page on my website that contains links to the database. The loading speed of this page is extremely slow and I'm looking for ways to speed it up. I have noticed that even when there are no visitors on the server ...

javascriptphphtmlcssmysql

Can you explain the distinction between using get() and valueChanges() in an Angular Firestore query?

Can someone help clarify the distinction between get() and valueChanges() when executing a query in Angular Firestore? Are there specific advantages or disadvantages to consider, such as differences in reads or costs? ...

javascriptangulartypescriptfirebasegoogle-cloud-firestore

Unable to find the solution for 'material-ui/Button'

I recently encountered an issue while trying to integrate the material-ui library into my existing React project. I used the command npm install --save material-ui, but it resulted in an error upon running it. The error message received is as follows: ...

javascriptreactjsmaterial-ui

Transferring information from the backend (powered by nodejs) to the frontend using JavaScript

I have data stored in my MongoDB database and I am retrieving this data from the DB to save it to an array. When a button is clicked on the webpage, I want to send this data to my JavaScript file and use the DOM to display it on the page. On page load, I ...

javascriptnode.jsmongodbdom