Monday, 15 March 2010

Pure CSS/HTML Dropdown With Anchors -


I want a user to be able to click on a part of a div, and then detail the detail of the devel Will happen. However I do not want to use PHP or Javascript for this. I found this interesting link: , and link: Now I want to do the same thing (as JSFDell) Still my problem is that it does not seem that!


My HTML:

  & lt; A href = "# hidemore" class = "hidemore col-xs-12" id = "headroom" & gt; More & lt; / A & gt; & Lt; A href = "# showmore" class = "showmore col-xs-12" id = "showmore" & gt; Less & lt; / A & gt; & Lt; Div class = "col-xs-2 itemtooshow" & gt; & Lt; Img src = "image.png" id = "holder sep" & gt; & Lt; / Div & gt; & Lt; Div class = "col-xs-2 itemtooshow" & gt; & Lt; Img src = "image.png" id = "holder sep" & gt; & Lt; / Div & gt; & Lt; Div class = "col-xs-2 itemtooshow" & gt; & Lt; Img src = "image.png" id = "holder sep" & gt; & Lt; / Div & gt;  

My CSS:

  .itemtoshow {display: none; Height: auto; Margin: 0; Swim left; } .showmore {display: none; }. Hydemor: Target + .showmore {display: inline; }. Hydmore: Target {Display: None; }. Hydmore: Target & gt; .itemtoshow {display: block; }. Hydmore, .showmore {font-size: 150%; font-weight: bold; Padding: 5px; Text align: center; Color: # 474747; }  

Update:

How do I get it with the following HTML?

  & lt; A href = "#postallionshowmore" class = "postallionshowmore col-xs-12" id = "postallionshowmore" & gt; More & lt; / A & gt; & Lt; Div class = "col-xs-12" & gt; & Lt; Div class = "col-xs-2 postallionitemtoshow" & gt; & Lt; Img src = "http: //localhost/postin'/images/defaultprofileimage.png" id = "postallionholderspecs" & gt; & Lt; / Div & gt; & Lt; Div class = "col-xs-2 postallionitemtoshow" & gt; & Lt; Img src = "http: //localhost/postin'/images/defaultprofileimage.png" id = "postallionholderspecs" & gt; & Lt; / Div & gt; & Lt; Div class = "col-xs-2 postallionitemtoshow" & gt; & Lt; Img src = "http: //localhost/postin'/images/defaultprofileimage.png" id = "postallionholderspecs" & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

I again tried the ~ connector but it does not work. :

I think this problem should be solved. Brother selector ~

 . Hydemor: Target ~ .imoshosho {display: inline;}  

No comments:

Post a Comment