CODEWITHSUNDEEP
jqueryhtmlcss
user2851355
user2851355

Reputation:

alignment issue with css ul li tags

I am using the following code,

http://jsfiddle.net/wHdYH/

<div>
    <ul>
        <li class="hide">Code 1</li>
        <li class="hide">Code 2</li>
        <li class="hide">Code 3</li>
        <li class="hide">Code 4</li>
        <li class="hide">Code 5</li>
        <li class="hide">Code 6</li>
        <li class="hide">Code 7</li>
        <li class="hide">Code 8</li>
    </ul>
</div>

$(document).ready(function() {
   $(".hide").click(function(e) {   
        $(this).toggleClass("hideit");
   });
});

ul li.show {
    list-style: inside;
    padding-left: 15px;
    cursor: pointer;
    height:16px;
}
ul li.hideit {
    list-style: none;
    list-style-image: none;
    padding-left: 35px;
    cursor: pointer;
}

But the issue is when i click it, the text goes to the right and click on again it comes to its same position

I am trying the way is when i click the li the list-style should come to none, but the text should not move

I am checking with IE7+ browsers and all OPera, Safari, FF, Chrome

Regards

Upvotes: 0

Views: 77

Answers (4)

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

When you click, a class is added to the element! hideit.

And for that class, you're using 

padding-left: 35px;

And on a re-click, the class is removed and indirectly the padding is removed from the element!

This is causing the issue, remove it! And your issue will be fixed!

Once you remove it, the element won't move any further!

Upvotes: 0

DaniP
DaniP

Reputation: 38262

Just remove padding from your class hideit:

ul li.hideit {
  list-style: none;
  list-style-image: none;
  /*padding-left: 35px; Remove this*/
  cursor: pointer;
}

The demo http://jsfiddle.net/wHdYH/1/

Upvotes: 2

j08691
j08691

Reputation: 208032

Remove padding-left: 35px; from your rules for ul li.hideit

jsFiddle example

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388446

Remove the padding from hide-it

ul li.hideit {
    list-style: none;
    list-style-image: none;
    cursor: pointer;
}

Demo: Fiddle

Upvotes: 3

Related Questions