CODEWITHSUNDEEP
javascriptcsshtml
Rohit Sharma
Rohit Sharma

Reputation: 141

Text on same line

existing code which I cannot modify, here expand class is a just a functionality which on click helps user to expand collapse a function.

<h3 class="expand"> TREE </h3>

Now what I have to do is put a text(Root) with smaller font size after Tree in same line whose visibility will be controlled by javascript.

<h3 class="expand"> TREE <div id="root" style="display:none"><font size="2"> Root</font></div></h3>

Javascript functionality is working fine but Tree and Root are not coming in 1 proper line! And yes I cannot change h3.

Upvotes: 1

Views: 4024

Answers (4)

feeela
feeela

Reputation: 29932

Is the generated content of the DIV really part of the headline? If not better add it behind for semantics:

<h3 class="expand">TREE</h3><div class="following_headline">ROOT</div>

<style>
.following_headline {
    position: relative;
    top: -2.5em;
    left: 0;
    float: right;
    font-size: .9em;
}
</style>

Upvotes: 0

Arjuna Del Toso
Arjuna Del Toso

Reputation: 589

To what are you setting the display value of root? If you use 'inline' it should work fine. Please compare:

<h3 class="expand"> TREE <div id="root" style="display:none;"><font size="2"> Root</font></div></h3>

<h3 class="expand"> TREE <div id="root" style="display:inline;"><font size="2"> Root</font></div></h3>

hope this helps. Cheers

Upvotes: 0

Brian Scott
Brian Scott

Reputation: 9361

If you're just looking to add the additional text within every matching header you could use a little jQuery to append the text based upon the css class matching?

Also, the reason your text isn't coming up on the same line is because you are using a div element. This is a block element which means it will occupy the whole horizontal width. Try using a span element or else changing the div elements style to use display:inline-block.

Here's a quick jQuery example of appending the text if it helps.

$('h3.expand').text($(this).append("<span style='font-size:0.9em;'>&nbps;(Root)</span>")

Upvotes: 0

Gaurav Shah
Gaurav Shah

Reputation: 5279

instead of div use a span tag 

<h3 class="expand"> TREE <span id="root" style="display:none"><font size="2"> Root</font></span></h3>

Upvotes: 2

Related Questions