Using CSS to show/hide content. How do I make hide the default


Tags: html,css

Problem :

I am trying to hide some content on a webpage until a user clicks on the [...]. So far Google has gotten me the following

<p>some text I want to show</p>
<a href="#" class="hide">[...]</a>
<a href="#" class="show">[...]</a>
<div id ="list">
<p>content I want to hide</p>
</div>

CSS

.show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:none; }
@media print { .hide, .show { display: none; } }

It works, but I would like hidden to be the default, and I cannot seem to figure out how to accomplish that.

As always, any help is appreciated.



Solution :

Just change css like following will work for you.

First hide list. And on focus display.

.show {display: none; }
#list { display:none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:block; }

Fiddle


    CSS Howto..

    How to handle multiple-language site without database or backend code?

    How to use 100% CSS background-image with scrolling content?

    How to position two divs on either side of the screen, HTML, CSS

    How to set offset on (selectmenu) overlays in jQuery Mobile [using a fixed header toolbar]?

    How to edit CSS so button appears on same line as input field?

    How to use a different stylesheet for iphone or android?

    How to define CSS anchor text decoration for anchors in a specific container

    How to embed Javascript in CSS?

    How to display a 100% width stripe in a CSS design using a fixed-grid blueprint?

    How to find the css, color codes and other coding a site uses

    How do we write a CSS “block-level-style” within an inline style attribute tag?

    How to set auto width for the fixed child div, when parent div change width?

    How to minify css files with RequireJS

    How do I display all the data in a MySQL table in a theme? [closed]

    How to center data table header and data using in bootstrap w/o using CSS?

    How to create two CSS transitions in parallel on nested elements

    How to blur only background and not content in Ionic/CSS

    How To Move A DIV Element A Little Towards The Top

    How to make elements appear under a
      in Firefox & IE8?

    How to have a different “placeholder style” and at the same time a different “text-input style” in Rails with CSS?

    How can I force CQ5.5 to ignore CSS data-uri-schemes?

    Want to override Bootstrap, but how to avoid the use of !important?

    How to prevent Ajax long-poll from reloading div in Chrome?

    How to put Facebook and Twitter buttons next to each other?

    How do I specify a css selector which matches exactly one of multiple values?

    How can I vertical align my
  • to the top of this box which uses `display: flex`?
  • How to import a selector style into another selector style?

    How to display mouseover effect in GridView rows using only CSS?

    How can I align a button at the bottom of a div?

    How to style the tick mark checkbox using css without using images?