カテゴリの名前を押すと商品の名前の一覧が表示されるCSSが書きたい

###前提・実現したいこと
Monacaでリストに商品を追加するシステムを作っています。
図１の状態から右側にあるカテゴリの名前を押すと
図２（清涼飲料押下後）のように表示されるようにしたいのですが、
これはCSSで書けますか？
書けないのであれば、javascript・jqueryの方法でお願いします。

###該当のソースコード

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10    <script>
11        //window.location.href = './menu.html';
12        //window.location.href = './tabletid_confirmation.html';
13        //window.location.href = './goods_register.html';
14        //window.location.href = './goods_edit.html';
15        //window.location.href = './goods_edit2.html';
16        //window.location.href = './shop_register.html';
17        //window.location.href = './shop_edit.html';
18        //window.location.href = './shop_edit2.html'; 
19    </script>
20</head>
21<body>
22	<div id="header">
23        <img class="upicon1" src="menu.png">
24        <h1 id="title">リスト</h1>
25        <img class="upicon2" src="back.png">
26    </div>
27    <div class="a" id="main">
28        <div class="view" id="list">
29            <div class="list" id="Goods1">
30                <div class="Name">りんご</div>
31                <div class="count">１つ</div>
32                <div class="plus"><img src="plus.png"></div>
33                <div class="minus"><img src="minus.png"></div>
34            </div>
35            <div class="list" id="Goods2">
36                <div class="Name">みかん</div>
37                <div class="count">１つ</div>
38                <div class="plus"><img src="plus.png"></div>
39                <div class="minus"><img src="minus.png"></div>
40            </div>
41            <div class="list" id="Goods3">
42                <div class="Name">ばなな</div>
43                <div class="count"> </div>
44                <div class="plus"><img src="plus.png"></div>
45                <div class="minus"><img src="minus.png"></div>
46            </div>
47            <div class="list" id="Goods4">
48                <div class="Name">いちご</div>
49                <div class="count">2つ</div>
50                <div class="plus"><img src="plus.png"></div>
51                <div class="minus"><img src="minus.png"></div>
52            </div>
53            <div class="list" id="Goods5">
54                <div class="Name">シャンプー</div>
55                <div class="count">2つ</div>
56                <div class="plus"><img src="plus.png"></div>
57                <div class="minus"><img src="minus.png"></div>
58            </div>
59            <div class="list" id="Goods6">
60                <div class="Name">リンス</div>
61                <div class="count">2つ</div>
62                <div class="plus"><img src="plus.png"></div>
63                <div class="minus"><img src="minus.png"></div>
64            </div>
65        </div>
66        <div class="view" id="category">
67            <div class="category" id="c0">カテゴリ</div>
68            <div class="category" id="c1">お菓子</div>
69            <div class="category" id="c2">果物</div>
70            <div class="category" id="c3">麺類</div>
71            <div class="category" id="c4">米類</div>
72            <div class="category" id="c5">清涼飲料</div>
73            <div class="category" id="c6">炭酸飲料</div>
74            <div class="category" id="c7">アルコール飲料</div>
75            <div class="category" id="c8">コーヒー飲料</div>
76        </div>
77    </div>
78</body>
79</html>

css
1/**/
2html{
3    height: 100%;
4}
5body{
6    font-family:san-serif;
7    color:#330000;
8    margin: 0px;
9    padding: 0px;
10    height: 100%;
11}
12div img {
13    height:62px;
14    width:62px;
15    padding: 2px;
16}
17
18#header {
19    display: flex;
20    justify-content: space-between;
21    width:100%;
22}
23#header img{
24    margin-top:1%;
25}
26#category{
27    width:33.3%;
28    float:left
29}
30.category{   
31    display: block; 
32    border: 1px solid #9F99A3;
33    background-color: #f0fff0;
34    text-decoration: none;
35    width:100%;
36    text-align: center;
37    font-size: 25px;
38}
39#c0{
40    border: 2px solid #666666;
41}
42/* clearfix */
43.view:before,
44.view:after {
45    content: "";
46    display: table;
47}
48.view:after {
49    clear: both;
50}
51.view{
52    float:left;
53}
54.a{
55    overflow: hidden;
56}
57/* clearfix */
58.a:before,
59.a:after {
60    content: "";
61    display: table;
62}
63.a:after {
64    clear: both;
65}
66#list{
67    float:left;
68    width:66.6%;
69    overflow: hidden;
70}
71.list{   
72    display: block;
73    border: 1px solid #9F99A3;
74    background-color: #f0fff0;
75    text-decoration: none;
76    width:100%;
77    text-align: left;
78    font-size: 25px;
79    float:left;
80}
81.list div{
82    float:left;
83}
84.Name{
85    width:35%;
86}
87.count{
88    width:35%;
89}
90.plus{
91    width:15%;
92}
93.plus img{
94    height:35px;
95    width:35px;
96}
97.minus img{
98    height:35px;
99    width:35px;
100}

行動規範の内容に同意します

回答2件

CSSのみで行いたい場合、ラジオボタンを利用した方法が考えられます。
たとえば、リストの部分はlabelで用意しておき、
該当するラジオボタンにチェックが入ったら、

#hoge:checked + ul#fuga {
  display: block;
}

のように、関連するリストを表示します。

HTML上で離れた場所にある要素を指定する間接セレクタというものもあるので、

#hoge:checked ~ ul#fuga {
  display: block;
}

といった書き方もできるかと思います。

ラジオボタン（input）そのものは、display: none;にすると機能しなくなる可能性がありますので、positionやz-indexを使って隠しておくと良いですよ。

ただ、この方法だとリストを押さずに非表示にすることができないんですよね。

もしPC用のサイトであれば、liの中にさらに下層のulを入れておき、
hoverしたら下層のulを表示する、ということができますが
スマホやタブレットに対応しようと思うと、どうしてもタップが必要ですね。
そうなるとJavaScriptを利用したほうが手っ取り早いということになります。

投稿2017/07/15 20:40

NatsumiOki

総合スコア1298

ベストアンサー

script と CSSでできます

例

<head>
<script>
window.addEventListener("load",
   function(){
       //class view のタグの c1 をリスニングし、クリックイベントを策定します 
       var elem = document.getElementById("c1");
       elem.addEventLsitener("click",
           function(){
         //僕のおいたdivをリスニングし（ｃｓｓで見えなくしています）、クリックでクラスを変えます。
               var juice = document.getElementById("s1");
               juice.className = "appear";
         //mouseupした時に見えないクラスにに戻します 
               elem.addEventListener("mouseup",
                   function(){
                       juice.className = "example";
                   }
               , false); 
           }
       , false);
   }
, false);  
</script>
</head>
<body>
    <div id="header">
        <img class="upicon1" src="menu.png">
        <h1 id="title">リスト</h1>
        <img class="upicon2" src="back.png">
    </div>
    <div class="a" id="main">
        <div class="view" id="list">
            <div class="list" id="Goods1">
                <div class="Name">りんご</div>
                <div class="count">１つ</div>
                <div class="plus"><img src="plus.png"></div>
                <div class="minus"><img src="minus.png"></div>
            </div>
            <div class="list" id="Goods2">
                <div class="Name">みかん</div>
                <div class="count">１つ</div>
                <div class="plus"><img src="plus.png"></div>
                <div class="minus"><img src="minus.png"></div>
            </div>
            <div class="list" id="Goods3">
                <div class="Name">ばなな</div>
                <div class="count"> </div>
                <div class="plus"><img src="plus.png"></div>
                <div class="minus"><img src="minus.png"></div>
            </div>
            <div class="list" id="Goods4">
                <div class="Name">いちご</div>
                <div class="count">2つ</div>
                <div class="plus"><img src="plus.png"></div>
                <div class="minus"><img src="minus.png"></div>
            </div>
            <div class="list" id="Goods5">
                <div class="Name">シャンプー</div>
                <div class="count">2つ</div>
                <div class="plus"><img src="plus.png"></div>
                <div class="minus"><img src="minus.png"></div>
            </div>
            <div class="list" id="Goods6">
                <div class="Name">リンス</div>
                <div class="count">2つ</div>
                <div class="plus"><img src="plus.png"></div>
                <div class="minus"><img src="minus.png"></div>
            </div>
        </div>

        <!--修正点--> 
        <div class="example" id="s1">
            <p>オレンジジュース</p>
            <p>カルピス</p>
            <p>ミックスジュース</p>
            <p>ももの天然水</p>
        </div> 

        <div class="view" id="category">
            <div class="category" id="c0">カテゴリ</div>
            <div class="category" id="c1">お菓子</div>
            <div class="category" id="c2">果物</div>
            <div class="category" id="c3">麺類</div>
            <div class="category" id="c4">米類</div>
            <div class="category" id="c5">清涼飲料</div>
            <div class="category" id="c6">炭酸飲料</div>
            <div class="category" id="c7">アルコール飲料</div>
            <div class="category" id="c8">コーヒー飲料</div>
        </div>
    </div>
</body>
</html>



<!----CSS----->
/**/
html{
    height: 100%;
}
body{
    font-family:san-serif;
    color:#330000;
    margin: 0px;
    padding: 0px;
    height: 100%;
}
div img {
    height:62px;
    width:62px;
    padding: 2px;
}

#header {
    display: flex;
    justify-content: space-between;
    width:100%;
}
#header img{
    margin-top:1%;
}
#category{
    width:33.3%;
    float:left
}
.category{   
    display: block; 
    border: 1px solid #9F99A3;
    background-color: #f0fff0;
    text-decoration: none;
    width:100%;
    text-align: center;
    font-size: 25px;
}
#c0{
    border: 2px solid #666666;
}
/* clearfix */
.view:before,
.view:after {
    content: "";
    display: table;
}
.view:after {
    clear: both;
}
.view{
    float:left;
}
.a{
    overflow: hidden;
}
/* clearfix */
.a:before,
.a:after {
    content: "";
    display: table;
}
.a:after {
    clear: both;
}
#list{
    float:left;
    width:66.6%;
    overflow: hidden;
}
.list{   
    display: block;
    border: 1px solid #9F99A3;
    background-color: #f0fff0;
    text-decoration: none;
    width:100%;
    text-align: left;
    font-size: 25px;
    float:left;
}
.list div{
    float:left;
}
.Name{
    width:35%;
}
.count{
    width:35%;
}
.plus{
    width:15%;
}
.plus img{
    height:35px;
    width:35px;
}
.minus img{
    height:35px;
    width:35px;
}

/*改善点*/
.view {
    float: right;
    width: 100px
    height: auto;
}
.example {
    display: none;
}
.appear {
    position: absolute;
    float: right;
    top: 0;
    right: 100px;
    width: 100px;
    height: auto;
}
p {
    border: 2px solid #666666
}

引用して改善策を考えてみました。

投稿2017/07/22 04:51