toggle

by lovromar

HTML

<ul id="toggle-view">
        <li>
            <h3>Title 1</h3>
            <span>+</span>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
        </li>
        <li>
            <h3>Title 2</h3>
            <span>+</span>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
        </li>
        <li>
            <h3>Title 3</h3>
            <span>+</span>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
        </li>
    </ul>

CSS

#toggle-view {
        list-style:none;    
        font-family:arial;
        font-size:11px;
        margin:0;
        padding:0;
        width:300px;
    }
        #toggle-view li {
            margin:10px;
            border-bottom:1px solid #ccc;
            position:relative;
            cursor:pointer;
        }
        
        #toggle-view h3 {
            margin:0;
            font-size:14px;
        }
        #toggle-view span {
            position:absolute;
            right:5px; top:0;
            color:#ccc;
            font-size:13px;
        }
        
        #toggle-view p {
            margin:5px 0;
            display:none;
        }    

JS - jQuery

We attach click event to the LI item and everytime a user click on the item check if P tag is visible. If it's hidden, show it otherwise hide it. Also, it will change the html value for the SPAN to either plus or negative sign.

    $(document).ready(function () {
        
        $('#toggle-view li').click(function () {
            var text = $(this).children('p');
            if (text.is(':hidden')) {
                text.slideDown('200');
                $(this).children('span').html('-');        
            } else {
                text.slideUp('200');
                $(this).children('span').html('+');        
            }
            
        });
    });

Share the love
0
inShare
Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

JavaScript

$('#toggle-view li').click(function () {
        var text = $(this).children('p');
        if (text.is(':hidden')) {
            text.slideDown('200');
            $(this).children('span').html('-');        
        } else {
            text.slideUp('200');
            $(this).children('span').html('+');        
        }
        
    });