CODEWITHSUNDEEP
phpjavascriptjqueryhtmlcss
user1178070
user1178070

Reputation:

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....

Upvotes: 0

Views: 115

Answers (3)

Josh
Josh

Reputation: 2895

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

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

Upvotes: 0

Alfred
Alfred

Reputation: 21396

You could try this:

div {
    display: inline-block;
}

Here is the corrected working Live Demo.

Upvotes: 0

Ram
Ram

Reputation: 144689

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/

Upvotes: 1

Related Questions