Geek Answers Handbook

CSS Extender with CSS

I don’t want my visitors to display all the news, so I want to use expanders for each news. But I want to support vistors with JavaScript disabled. My attempt:

#news > .panel > .panel-heading > .panel-title > .label{
   float: right;
}

#news > .panel > .panel-body {
    display: none;
}

#news > .panel > panel-heading > panel-title > a:visited < .panel-title < .panel-heading <         .panel > .panel-body {
   display: block;
}


        <div id="news" class="tab-pane active">
                {% for announcement in server.announcements.all %}
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><a href="#">{{ announcement.title }} </a><span class="label label-default">By {{ announcement.writer.get_username }} at {{ announcement.date_created }}</span></h3>
                        </div>
                        <div class="panel-body">

                            {{ announcement.content|safe_html }}
                        </div>
                    </div>
                {% endfor %}
        </div>
+4
source share
3 answers

You need to make some changes

-, ( CSS3) , , CSS, :visited psuedo : (1) a .panel-body, .panel-body css, (2) :visited , ( ).

? :target.

(1) , (2) , id .panel-body href a, . , html :

<div id="news" class="tab-pane active">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a href="#Item1">Title 1</a>
                <span class="label label-default">By writer name</span>
            </h3>
        </div>
        <div class="panel-body" id="Item1">            
            Panel 1 body
        </div>
    </div>
</div>

a href, id .panel-body . , , CSS :

#news > .panel > .panel-body {
    display: none;
}
#news > .panel > .panel-body:target  {
   display: block;
}

, , , .

CSS3, javascript - ( javascript )

+4

:
( ), : http://jsfiddle.net/Py2HU/1/

JS- Show/Hide, N / ( Previous/Next )

CSS

.news-wrapper {
    width: 300px;
    max-height: 400px;
    overflow: auto;
    border: 1px solid #000;
}

HTML

<div class="news-wrapper">
    <ul class="news">
        <li class="news-item">Lorem ipsum </li>
        <li class="news-item">Lorem ipsum </li>
        <li class="news-item">Lorem ipsum </li>
        <li class="news-item">Lorem ipsum </li>
    </ul>
</div>

: IE7 + IE6 ( , .ie6 .news-wrapper { height: 400px }, - )

+1

, Single Expander CSS3. Bootstrap Glyph (/). Plunker

HTML

 <div class="expandercheckbox">
  <input id="e1" type="checkbox" checked="checked" />
  <label for="e1" class="expanderheader">Click me to Expand/Collpase</label>
  <div class="expandercontainer">
  I am in container. I am visible. Click above to make be collpase.
  </div>
</div>

CSS

 body{
 padding:50px;
 background: #484848;
 color:#fff;
}
.expandercheckbox input[type="checkbox"] { 
 display: none;
 }
.expandercheckbox .expanderheader {
 cursor: pointer;
 }
.expandercheckbox input[type="checkbox"] + .expanderheader {
 color: #fff;
 font-weight: bold;
 font-size: 12px;
 white-space: nowrap;
 user-select:none;
-webkit-user-select:none;
}
.expandercheckbox input[type="checkbox"] + .expanderheader:before {
  content: "\e113";
  display: inline-block;
  font: 14px/1em Glyphicons Halflings;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  margin: -2px 0.25em 0 0;
  padding: 1.5px 3.5px;
  vertical-align: top;
  background: #717171;
  /* Old browsers */
}
.expandercheckbox input[type="checkbox"]:checked + .expanderheader:before {
  content: "\e114";
  padding: 2.5px;
}
.expandercheckbox input[type="checkbox"]:checked + .expanderheader:after {
  font-weight: bold;
  color:#000;
}
.expandercontainer{
background:#000;
 padding:15px;
}
.expandercheckbox input[type="checkbox"]:checked ~ .expandercontainer {
  display: block;
 }
.expandercheckbox input[type="checkbox"]:not(:checked) ~ .expandercontainer {
  display: none;
 }
+1

More articles:


All Articles