Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I suggest you to not register onclick handler directly in html code. As you are using jQuery, this scenario should work for you:</p> <p>HTML:</p> <pre><code>&lt;div class="left_pane"&gt; &lt;div class="content_left_pane"&gt; &lt;ul data-role="listview" id="left_side_ul"&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="right_pane"&gt; &lt;ul data-role="listview" id="right_side_ul"&gt; &lt;li class="showDetails" id="account-1"&gt; &lt;div class="ui-grid-b"&gt; &lt;div class="ui-block-a"&gt;&lt;div&gt;[Facility name] A&lt;/div&gt;&lt;div&gt;[Account]&lt;/div&gt;&lt;/div&gt; &lt;div class="ui-block-b"&gt;&lt;div&gt;[Address Line 1]&lt;/div&gt;&lt;div&gt;[Address Line 2]&lt;/div&gt;&lt;div&gt;[City],[Statte],[Zip code]&lt;/div&gt;&lt;/div&gt; &lt;div class="ui-block-c"&gt;&lt;span class="ui-li-count" style="right: 30%; font-size: 15px;"&gt;12&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>JavaScript:</p> <pre><code>$(document).ready(function(){ $('#right_side_ul li').live('click', function(){ $(this).appendTo('#left_side_ul'); }); $('#left_side_ul li').live('click', function(){ $(this).appendTo('#right_side_ul'); }); });​ </code></pre> <p>Please note, that I'm using <code>live()</code> here because <code>LI</code> elements are dinamically added to the <code>UL</code>.</p> <p>As you can see, javascript code for both right and left panes are almost the same, so you may optimize my solution by combining them into one</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload