James Harold James Harold - 1 month ago 5
CSS Question

perform the same showHide effect in multiple places on the page with different YT videos in every div element

The "show me" element, when clicked generates showHide effect. Iframe is loaded only after the webpage is rendered, which makes the website more efficient in terms of its size. However it works only with one div. Technically I could copy and paste the same function all over the place with different class names, but it'd make my code really sloppy and less efficient. What I'd like to accomplish:


  • perform the same showHide effect in multiple places on the page with different YT videos in every div element

  • still be able to load a content after page is rendered



HTML:

<div class="#">
<a href="#" id="show_me"><i class="icon fa fa-fw fa-angle-down"></i>
<span>Show</span> Me</a>
<div id="i_frame"></div>
</div>


JS:

$(document).ready(function(){
$("#show_me").click(function(e){

e.preventDefault();

if ($(this).is(".opened") ) {
$(this).removeClass("opened").find(".icon").removeClass("fa-angle-up").addClass("fa-angle-down").parent().find("span").text("Show");
$("#i_frame").hide().html("");

} else {
$(this).addClass("opened").find(".icon").removeClass("fa-angle-down").addClass("fa-angle-up").parent().find("span").text("Hide");
$("#i_frame").show().html("<iframe width='100%' height='315' src='https://www.youtube.com/embed/#' frameborder='0' allowfullscreen></iframe>");
}

});
});


CSS:

#i_frame {
display: none;
}


https://jsfiddle.net/jeremykenedy/fkcnncjm/

Answer

Make your code more modular by using classes and DOM traversal to find the elements.

You could also data attributes to assign different videoes to each iframe etc.

$(document).ready(function() {
    $(".show_me").on('click', function(e) {
        e.preventDefault();

        $(this).toggleClass('opened')
               .find('.icon')
               .toggleClass('fa-angle-up fa-angle-down')
               .end()
               .find('span')
               .text(function(_, txt) {
                   return txt === 'Show' ? 'Hide' : 'Show';
               });

        var iframeEl = $(this).closest('.parent').find('.i_frame');

        if (iframeEl.toggle().find('iframe').length === 0) {
            var iframe = $('<iframe />', {
                width           : '100%',
                height          : '315',
                src             : iframeEl.data('yt'),
                frameborder     : '0',
                allowfullscreen : 'true'
            }).appendTo(iframeEl)
        }
    });
});
.i_frame {
    display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <a href="#" class="show_me"><i class="icon fa fa-fw fa-angle-down"></i><span>Show</span> Me</a>
    <div class="i_frame" data-yt="https://www.youtube.com/embed/9bZkp7q19f0"></div>
</div>

<div class="parent">
    <a href="#" class="show_me"><i class="icon fa fa-fw fa-angle-down"></i><span>Show</span> Me</a>
    <div class="i_frame" data-yt="https://www.youtube.com/embed/FrG4TEcSuRg"></div>
</div>

Comments