brynn Posted July 14, 2013 Share Posted July 14, 2013 Hi Friends, In another (long) topic I was using the following code (which works beautifully, and just how I want). But now have a need for it to be written in the Inline Style. The problem is that it's just a bit too advanced for me to understand completely, and not quite well enough to convert it over from Internal Style to Inline Style. Could someone tell me if it's even possible for this to be written Inline? And if so, how? <!DOCTYPE html><html><head><title>test expand list without scripts</title></head><style>.collapsibleList li > input + *{display: none;}.collapsibleList li > input:checked + *{display: block;}.collapsibleList li > input{display: none;}.collapsibleList label{cursor: pointer;}</style><body><ul class="collapsibleList"> <li> <label for="mylist-node1">Click to open list 1</label> <input type="checkbox" id="mylist-node1" /> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li> <li> <label for="mylist-node2">Click to open list 2</label> <input type="checkbox" id="mylist-node2" /> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li></ul></body></html> Thank you very, very much! PS -- I tried to credit the author of this code in the other topic, but for some reason, this message editor would not allow me to post a text link. So I'll try again here http://bernholdtech.blogspot.de/2013/04/very-simple-pure-css-collapsible-list.html Link to comment Share on other sites More sharing options...
Ingolme Posted July 14, 2013 Share Posted July 14, 2013 Inline? You mean by using the style attribute? No, it's not possible, nor is it recommendable. If you can explain why you want it that way maybe we can find an alternative method. Link to comment Share on other sites More sharing options...
davej Posted July 14, 2013 Share Posted July 14, 2013 I agree with the Fox. Inline css is something to be avoided except in very rare cases. It just makes a mess. Link to comment Share on other sites More sharing options...
brynn Posted July 15, 2013 Author Share Posted July 15, 2013 (edited) I mean the inline style like described here: http://www.w3schools.com/css/css_howto.asp It's because the html wysiwyg where I'm trying to insert the code, removes everything between (and including) <style> and </style> (when I save it). So if I insert that code into the editor, and save it, I get the checkboxes (display none or display block isn't recognized), and the 1st level li items won't collapse or expand. So I thought it might work if I wrote the style into the ul, ol, or li tags. As still very much a newbie with CSS, I had the impression that any CSS code can be written with an external style sheet, internal style sheet, or inline style. But apparently that's not so? Edited July 15, 2013 by brynn Link to comment Share on other sites More sharing options...
Ingolme Posted July 15, 2013 Share Posted July 15, 2013 You shouldn't use an HTML editor that behaves like that. Try an editor such as ConTEXT or Notepad++. Inline styles are restricted because they don't use selectors. Link to comment Share on other sites More sharing options...
brynn Posted July 15, 2013 Author Share Posted July 15, 2013 No, I don't mean a code editor that I use to write the code! (I use Notepad++, btw) This is a portal style forum which provides a means for members to write articles or whole webpages. It is an html wysiwyg editor (not bbc), similar to the message editor into which I'm presently typing this message. However, there's a button where I can switch to, idk, code mode, or something like that, where I can insert html code, or just type it out, if I wanted to, rather than using the wysiwyg buttons. So when I switch to code mode, and paste in the code, then save the page, I see that it's not working as I expected, because on the new page, I see the checkboxes, and the list won't expand/collapse (as I said). So I open it back up to edit, and I see that it has removed the <style> through </style>. So that's why I thought if I used the inline style, it might work. Also, because if I use the wysiwyg, and for example, write a heading with a certain size, font and color of text -- then if I look at the code, it uses the inline style (style attribute). (For example: <p style="text-align: center;"><strong><span style="font-family: verdana,geneva; font-size: medium;">title</span></strong></p>) That's why I thought if my collapsing list code could be written inline, it might work. So, I guess it sounds like it can't be done, in this case? Link to comment Share on other sites More sharing options...
Ingolme Posted July 15, 2013 Share Posted July 15, 2013 It seems to have restrictions, there's just no way you can get around that. Link to comment Share on other sites More sharing options...
brynn Posted July 15, 2013 Author Share Posted July 15, 2013 Ok, well thanks anyway. I appreciate your help Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now