I've got a bunch of conference session information formatted as a listview widget within a jQuery Mobile app. At the moment I have a paragraph within each li that contains the much longer session description and I've styled it to be display:none. I've wrapped the entire li in a link that goes nowhere at the moment. I'm looking for help on how to programmatically open the hidden paragraph as a popup widget when someone clicks on the li. Normally I believe popup activation links are related to a div's unique id, which my many session descriptions do not currently have. And my content is with-in the href element, not separate from it. Could someone suggest a wise approach to popping up this hidden paragraph? I'm hoping to avoid having to create individual ids for each description, and maybe even avoid having to wrap the paragraph in a special div for the popup. Here's my current li code...
<li class="preconference_1-day"><a href="#">
<h3>Conflict Management and Peacebuilding as a Classroom Management Tool</h3>
<p> Presented by <strong>Some University</strong></p>
<p>Location: McPherson Lab, Room 1035</p>
<p class="ui-li-aside"><strong>9:00 AM</strong></p>
<p style="display:none">Description: Participants will be introduced to a...</p></a>
</li>
I'm using jquery-2.2.4 and jquery.mobile-1.4.5
An easy way is to use the data attribute to store the extra info
e.g <li data-extra="Description: The second set..." class="preconference_1-day">
Code
//The list item click function
$("#listview > li").on("click", function() {
//Get whats in the data attribute from item clicked
var extra = $(this).attr("data-extra");
//Empty whats inside the popup, append data, and open the popup
$("#mypopup").empty().append("<p>"+extra+"</p>").popup("open");
});