Aligning Text in CSS/JS menu

Question

I'm trying to align the text in the menu at: http://crango.uofydating.com/dir/New2.html

• In the 1st tab, I want there to be a line break after "Item".
• In the 2nd and 3rd tab, I want there to be a line break after "This is".

I only posted the part of the menu that I need help with, so it may look a bit odd. But it is connected to some Javascript code which makes it more challenging to edit. The JS can't be removed.

Answer 1

Here is your solution

I have created a fiddle for you

Use .html() instead of .text()

CODE:

.html('<strong>' + $(this).find('a').html() + '</strong>')

It works great ;)

Check it

Fiddle http://jsfiddle.net/krunalp1993/yL6Tn/1/

Hope this helps you :)

Answer 2

In your js code, you are setting back to your original text inside strong tags with .html inside the .click method. So just insert the line break in there. Insert break in this line in your js:

 .html('<strong>' + $(this).text() + '</strong>')