Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Your problem is with <code>replaceWith()</code> you are replacing the code you are using as a handle ...</p> <pre><code>$j(".monitoringDesc").click(function(e) { e.preventDefault(); $j(".widgetGroup").html($j("#newGroup").html()); $j(".widgetGroup").show("slide", { direction: "right" }, 200); }); </code></pre> <p>this keeps the container <code>widgetGroup</code> in tact - just replacing the contents using <code>.html()</code></p> <p><a href="http://jsfiddle.net/qL6gB/5/" rel="nofollow">Here is an example of both working using this method</a></p> <h2>Update</h2> <p>You could make you code and function a little more generic ... first add some <code>data</code> to the HTML :</p> <pre><code>&lt;li&gt;&lt;a href="#" class="monitoringDesc" data-target="newGroup"&gt;Show group 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="monitoringDesc" data-target="newGroup2"&gt;Show group 2&lt;/a&gt;&lt;/li&gt; </code></pre> <p>all I have added is the 2 <code>data-target</code> attributes - then the following jQuery will pull in the content you require based on the above data</p> <pre><code>$j(".monitoringDesc").click(function(e) { e.preventDefault(); $j(".widgetGroup").html($j("#"+$j(this).data('target')).html()); $j(".widgetGroup").show("slide", { direction: "right" }, 200); }); </code></pre> <p>this uses the <a href="http://api.jquery.com/data/" rel="nofollow">.data()</a> method to extract the <code>data-target</code> property from the HTML above. I also changed the class of the anchors to match - so we can listen to the click event on both.</p> <p><a href="http://jsfiddle.net/qL6gB/7/" rel="nofollow">Working example of this solution here</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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