Manaful Choice Subject

by mejileben

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="frame-header">
    <div class="mod-header">
        <div class="serviceName inlb">
            <span class="logo">Manaful</span>
        </div>
        <div class="login inlb">
            <button class="loginButton">
                logout
            </button>
        </div>
    </div>
</div>
<div class="frame-contents">
    <div class="mod-title">
        <div class="box">
            <span class="msg">2. Touch to your subject !</span>
        </div>
    </div>
    <div class="mod-recent">
        <div class="sectionName">
            <span class="name">Recently you learned</span>
        </div>
        <ul class="subject">
            <li class="panel">
                <div class="category">
                    <span class="name">英語</span>
                </div>
                <div class="title">
                    <span class="name">ややこしい類語</span>
                </div>
            </li>
            <li class="panel">
                <div class="category">
                    <span class="name">Qiita</span>
                </div>
                <div class="title">
                    <span class="name">”人工知能”タグの投稿一覧</span>
                </div>
            </li>
            <li class="panel">
                <div class="category">
                    <span class="name">英語</span>
                </div>
                <div class="title">
                    <span class="name">難易度順TOEIC英単語</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="mod-subject">
        <div class="sectionName">
            <span class="name">Categories</span>
        </div>
        <ul class="categories prg-categories">
            <li class="category">
                <div class="title prg-categoryTitle">
                    <span class="pulldownIcon"><i class="fa fa-sort-down"></i></span>
                    <span...

CSS

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-image: url(https://s4.postimg.org/y86m0b88d/02634x_Fotor.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/* frame-header */
.frame-header {
    width: 100%;
}
/* mod-header */
.mod-header {
    padding: 5px 0px;
    background: #11cccc;
}
.mod-header .inlb {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
}
.mod-header .serviceName {
    margin-left: 10px;
}
.mod-header .serviceName .logo {
    font-weight: bold;
    color: #ffffff;
}
.mod-header .login {
    float: right;
}
.mod-header .login .loginButton {
    margin-right: 20px;
    padding: 5px 10px;
    border-left: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    border-right: 1px solid #555555;
    border-bottom: 1px solid #555555;
    border-radius: 5px;
    color: #ffffff;
    background: #339999;
}
/* frame-contents */
.frame-contents {
    width: 100%;
    height: 100%;
    padding-top: 20px;
}
/* mod-title */
.mod-title {
    margin-bottom: 25px;
}
.mod-title .box {
    text-align: center;
}
.mod-title .box .msg {
    font-size: 120%;
    font-weight: bold;
    color: #eee;
}
/* mod-recent */
.mod-recent {
    
}
.mod-recent .sectionName {
    margin-left: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #ccc;
}
.mod-recent .sectionName .name {
    font-size: 160%;
    font-weight: bold;
    color: #11cccc;
}
.mod-recent .subject {
    margin-left: 20px;
    margin-right: 20px;
}
.mod-recent .subject .panel {
    margin: 0 0 10px 0;
    padding: 5px;
    border-top: 2px solid #ccc;
    border-right: 2px solid #999;
    border-bottom: 2px solid #666;
    border-left: 2px solid #fff;
    background: #fff;
}
.mod-recent .subject .panel .category {
    width: 18%;
    margin: 0 10px 0 0;
    padding: 10px 10px 10px 0;
    text-align: center;
    border-right: 1px solid #ccc;
    display: inline-block;
}
.mod-recent .subject...

JavaScript

let root = $('.prg-categories');
root.on('click', '.prg-categoryTitle', (e) => {
	let target = $(e.currentTarget);
    let icon = target.find('.fa-sort-down');
    if(icon.length > 0){
    	icon.removeClass('fa-sort-down');
        icon.addClass('fa-sort-up');

        let parent = target.parent();
        let hidingElement = parent.find('.init-hide');
        hidingElement.fadeIn();	
    } else {
	    icon = target.find('.fa-sort-up');
    	icon.removeClass('fa-sort-up');
        icon.addClass('fa-sort-down');

        let parent = target.parent();
        let hidingElement = parent.find('.subjects .subject');
        hidingElement.fadeOut();
    }
});