DYNAMIC SHOW/HIDE

by LyndseyB

HTML

<body>
    <ul class="js-toggle">
        <li> This is List Item 1 <span> This is hidden inside Item 1! </span> </li>
        <li> This is List Item 2 <span> This is hidden inside Item 2! </span> </li>
        <li> This is List Item 3 <span> This is hidden inside Item 3! </span> </li>
        <li> This is List Item 4 <span> This is hidden inside Item 4! </span> </li>
    </ul>  
</body>

CSS

li { 
    list-style: none;
    display: inline-block;
    position: relative;    
    background: red;
    width: 80px;
    height: 70px;
    color: white;       
    margin: 1em;
    padding: 1em;       
    cursor: pointer;
}

li span { 
    opacity: 0;
    position: absolute;    
    top: 100%;
    left: 0;
    color: black;
}

.visible {
    display: inline-block;      
    transition: all 0.3s ease-in-out;
    opacity: 1;
}

JavaScript

(function() {    
    $(function() {
        var toggler = $('.js-toggle');

        toggler.on('click', function(e) {
            var target = $(e.target);               
           
            if(target.is('li')) {                                  
            	target.find('span').toggleClass('visible');
            }
        });
    });
})();