Question

I have a list which consists of two sections:

<ul data-role="listview"  data-theme="a" data-inset="true" data-split-theme="c">

        <li>
            <a style="padding-top:0">
                <h5>Text 1</h5>
                <p><strong>Text 2</strong></p>
                <p>Date: April 17, 2012</p>
            <a href="http://some address" ></a>
        </li>

What I would like to do is when the user clicks anywhere in the left-hand section of a row I would like to play an audio file (using the html5 tag) and for the text in this section to be removed and replaced with the audio controls for the playing audio. When the user stops the audio I’d like things to return to as they were.

I’m new to JQuery and JQueryMobile and not sure where to begin with this.

Ideally if it is possible when the audio controls appear it would be great if there could be some sort of flipping animation i.e. such as that section of the row rotates and on one side is the audio controls and on the other is the text.
Is such a thing possible?

TIA

Answer 1

You can nest whatever you want in your li, so you can just put two div containers in there and bind to the appropiate events and show and hide them based on that.

For example:

Markup:

<ul id="parentUL" data-role="listview"  data-theme="a" data-inset="true" data-split-theme="c">
        <li>
            <a  style="padding-top:0">
                <div class="txtCnt">
                <h5>Text 1</h5>
                <p><strong>Text 2</strong></p>
                <p>Date: April 17, 2012</p>
                </div>
                <div class="audioCnt displayNone">
                    <h1>Audio Controls</h1>
                </div>
        <a href="http://some address" ></a>
    </li>
    </ul>

JavaScript:

$('#parentUL').on('click', '.txtCnt', function () {
    $(this).hide().parent().find('.audioCnt').show();
});

$('#parentUL').on('click', '.audioCnt', function () {
    $(this).hide().parent().find('.txtCnt').show();
});