CSS/JS Query

Question

Hi,,

I'm trying to play around with some code and get my head around it.

<ul class="metro">
    <li><i class="fa fa-folder-open"></i><span>Folders</span></li>
    <li><i class="glyphicon glyphicon-globe"></i><span>Websites</span></li>
    <li><i class="fa fa-windows"></i><span>Applications</span></li>
    <li><i class="fa fa-home"></i><span>Home</span></li>
</ul>

<div class="box">
    <span class="close"></span>
</div>

and my js

$(document).ready(function () {
    var $box = $('.box');

    $('.metro li').each(function () {
        var color = $(this).css('backgroundColor');
        var content = $(this).html();

        $(this).click(function () {
            $box.css('backgroundColor', color);
            $box.addClass('open');
            $box.find('p').html(content);
        });

        $('.close').click(function () {
            $box.removeClass('open');
            $box.css('backgroundColor', 'transparent');
        });
    });
});

$(document).keyup(function (e) {
    switch (e.which) {
        case 27:
            $(".close").trigger('click');
            break;
        default:
            break;
    }
});

how do i get it so i can seperate by div's so i.e. click folders button and it goes off and find's that div and display the content

Answer 1 · 2016-08-22T22:05:38Z

August 22, 2016 10:05pm

You have several options for displaying content on events.

Since you're using jQuery, it's quite easy to show and hide elements. Assuming your buttons and div's have unique id's, it might look something like this:

$('#buttonone').click(function() {
     $('#divone').show();
});

Welcome to the Treehouse Community

Looking to learn something new?

Alex Young

Alex Young

CSS/JS Query

1 Answer

Steven Parker

Steven Parker

You have several options for displaying content on events.