Jquery toggle .. fixing alighnment

Hello people i have this script

<a class="clickMe" toggle="first">Text 1</a>
</br>
<div id="first" class="text"> - This text will be toggled</div>

<a class="clickMe" toggle="second">Text 2</a>
</br>
<div id="second" class="text"> - This text will be toggled 2</div>

and the jquery

 $('a.clickMe').click(function () {
   id = $(this).attr('toggle');
   $('.text').not('#' + id).hide();
   $('#' + id).show();
 });

above code works fine by toggling This text will be toggled or This text will be toggled 2 when we click on Text 1 or Text 2 is clicked, please check the demo

but now what i trying to do is to have fixed position/alignment for the toggled text,right now it is toggled below Text 1 or Text 2 ,BUT I NEED TO PUT THIS ON RIGHT HAND SIDE SO THAT WHEN EVER ANYONE OF THE TEXT1 OR TEXT2 IS CLICKED TOGGLED STATEMENT SHOULD BE SHOWN ON THE SAME PLACE(RIGHT SIDE NOT BELOW) ...PLEASE HELP ME TO FIX THIS....

Answers


Why not try this by using jQuery's .text() feature:

http://jsfiddle.net/FlameTrap/pe8xV/2/


You can use a non-block element like span and toggle method.

<a class="clickMe">Text 1</a>
<span class="text"> - This text will be toggled</span>
<br/>
<a class="clickMe">Text 2</a>
<span class="text"> - This text will be toggled 2</span>

$('a.clickMe').click(function () {
   $(this).next().toggle()
});

http://jsfiddle.net/LTYa2/66/


You could try this:

div {
    display: inline-block;
}

Here is the corrected working Live Demo.


Need Your Help

Calculated Columns in the Entity Framework?

entity-framework entity-framework-4

I've not yet got much experience with ORM's, and on my last ASP.NET Web Forms site, a friend created a mapping file (for nHibernate) which contained a couple of calculated columns. These 2 columns ...

groovy parse xml into pojo

xml groovy pojo

i need to get this url (http://localhost:8983/solr/select/?q=treen&amp;omitHeader=true) and get the response as xml, and for each record, parse it to a class and then create a final map with all the