Multiple Read more issue in css, how do i solve that?


Tags: html,css,html5,css3

Problem :

I am working on a 'read more' content using css. I got a solution as to how do it online. But when am making multiple read more contents, there is a problem.

When clicking on the second 'read more' button, the 1st set of text contents opens up instead of the second set of contents. How do I solve that?

article {
    margin-bottom: 3rem;
    position: relative;
    *zoom: 1;
}

article:before, article:after {
    content: "";
    display: table;
}

article:after { clear: both }

article section:last-of-type {
    display: none;
    visibility: hidden;
}

section {
    -webkit-transition: .125s linear;
    -moz-transition: .125s linear;
    -ms-transition: .125s linear;
    -o-transition: .125s linear;
    transition: .125s linear;
}

input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

[for="read_more"] {
    position: absolute;
    bottom: -3rem;
    left: 0;
    width: 100%;
    text-align: center;
    padding: .65rem;
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}

[for="read_more"]:hover {
    background: rgba(0,0,0,.5);
    color: rgb(255,255,255);
}

[for="read_more"] span:last-of-type {
    display: none;
    visibility: hidden;
}

input[type=checkbox]:checked ~ section {
    display: block;
    visibility: visible;
    width: 100%;
}

input[type=checkbox]:checked ~ figure { width: 100% }

input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {
    display: none;
    visibility: hidden;
}

input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {
    display: block;
    visibility: visible;
}
<div>
    <article>
        <input type="checkbox" id="read_more" role="button">
        <label for="read_more" onclick=""><span>Read More</span><span>Hide</span></label>     
            <section>
            <p>Vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id </p>
            </section>    
        	<section>
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est</p>
    		</section>
    </article>​
</div>

<div>
    <article>
        <input type="checkbox" id="read_more" role="button">
        <label for="read_more" onclick=""><span>Read More</span><span>Hide</span></label>     
            <section>
            <p>Vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id </p>
            </section>    
        	<section>
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est</p>
    		</section>
    </article>​
</div>

Here is the jsfiddle



Solution :

You need to change the id and for attributes in checkbox and label elements respectively. Something like:

<input type="checkbox" id="read_more1" role="button"/>
<label for="read_more1" onclick=""><span>Read More</span><span>Hide</span></label>

And then in CSS code a possible selector could be [for^="read_more"] instead [for="read_more"].

Check a demo here.


    CSS Howto..

    How to select non-header cells with css

    advice about how to vertically center content in fluid element

    How to add class CSS after ng-click to parent element?

    How to make a snowboard (or squeezed rectangle) shaped div in css?

    How to slide-out a submenu from under the navigation bar using CSS transition?

    How to clean style sheets mess? [duplicate]

    Is there a limit to how deep an HTML document or CSS tree can be?

    How to center div while keeping inside divs on same line in css?

    On css: if text line is break show dots

    CSS: How to add background-color with background-image under it (same color)

    How to apply css for 1900x600 width screen resolution only

    How to translate html, css and js into one javascript (animation)

    How to build a simple CSS layout that expands to the viewport?

    How can I fill a fixed-size
    with a variable-size

    ?

    How to get css property value in pure javascript

    How to make CSS Animation reverse on hover-out?

    How do you position divs on a line with space in the middle, without fixing the width of the container?

    How to add a fade effect to html transition with javascript

    How To Outline a PNG (Transparent) image with CSS?

    How does the Meebo bar work so well cross-browser?

    How to make arrows on both sides of a box using css [duplicate]

    CSS: How to put content between header and footer

    How to turn off visjs active shadow box?

    How to reference css in actionlink?

    How to hide a column in a DataGrid?

    How to create an ActionImage from a CSS Sprite

    How to use Firebug to easily find which css file defines a particular style

    How to make sure one css file does not override another one?

    How can I create an overlay that stays in DOM as opacity 0 but doesn't prevent content from being clickable?

    How do you add PHP to CSS?