Set display of jQuery show hide toggle in css -
This is because I want to set a display in CSS because all pages need special content to be expanded or Separated from page to page. As it is now, it seems that I would need to load a different JS file for each page's display preferences. I want to keep it centered all in one file ...
CSS:
div.expandable1 {display: block;} div.expandable2 {display: html: / P> & lt; P id = "tab1" class = "button plus 1" & gt; News - & lt; / P & gt; & Lt; Div class = "expandable1 panel1" id = "one" & gt; [Content] & lt; / Div & gt; JS:
$ (".button"). Show (); $ ('. Plus1') Toggle ($ {"(" # one "). $ (" (Plus ")" $ " ). (["Plus + 1"). Text ("News +")})}} [etc] My question:
How can I use CSS to control the following:
Example:
Page A-Expandable 1 has been expanded, expandable 2 short pages B-Expandable 1 collapses, Expandable 2 expanded etc. It has approximately 6-8 different page configurations, out of which 4-5 sections [expandable 1-6] will need to be displayed in different combinations.
As of now, I get only the above mentioned in the form of {display: block / none, etc.} but my JS buttons get a little help.
Idea 1:
It seems that you want to type arguments for each page .
HTML:
& lt; Html & gt; & Lt; Top & gt; & Lt; / Head & gt; & Lt; Body class = "pageA" & gt; & Lt; / Body & gt; & Lt; / Html & gt; CSS / * Page One Styles * / .pageA div.expandable1 {display: block;} .pageA div Expandable2 {display: none;} / * PageB styles * / .pageb div.expandable1 {display: none;} .pageb div.expandable2 {display: block;} idea 2
Javascript only If you need to do all of this with Javascript, you will need to find the page name using window.location. Not a great way, but it is definitely possible. if (window.location.pathname === '/ pageA /') {$ ('div.expandable1') Show (); Hide $ ('Div.expandable2'). }
Comments
Post a Comment