質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1269閲覧

divタグをアコーディオン形式で開きたい

RyoYo

総合スコア9

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/08/01 16:14

編集2022/01/12 10:55

前提・実現したいこと

div内の画像をクリックするとアコーディオンの別のdivタグがあらわれるようにしたいです。

発生している問題・エラーメッセージ

画像をクリックしてもアコーディオンが開きません。

該当のソースコード

html

1<body> 2 <h1>New York Stories</h1> 3 <a class="anchor" href="#">Scroll</a> 4 <!--start portfolio details --> 5 <div class="menu"> 6 <label class="label1" for="type1"> 7 <div class="portfolio-detail-0"></div> 8 </label> 9 <input type="checkbox" id="type1" class="accordion"> 10 <label class="slide" id="links1"> 11 <div class="view-box"><p>aaa</p></div> 12 </label> 13 </div> 14 15 16 <div class="portfolio-detail-1"></div> 17 <div class="portfolio-detail-2"></div>

scss

1* { 2 box-sizing: border-box; 3 } 4 body { 5 font-family: Calluna, Arial, sans-serif; 6 background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(file:///Users/ryoyokoyama/pythonBox/portfolio/img/portfolio-main.jpg); 7 background-repeat: no-repeat; 8 background-attachment: fixed !important; 9 background-size: cover !important; 10 background-position: center top !important; 11 padding: 1rem; 12 padding-top: 45%; 13 color: #fff; 14 z-index: 1; 15 } 16 17 h1 { 18 font-size: 4rem; 19 text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 20 line-height: 1; 21 position: absolute; 22 top: 10px; 23 font-weight: 100; 24 } 25 p { 26 font-size: 1.3rem; 27 text-align: left; 28 line-height: 1.6; 29 margin-left: 8rem; 30 margin-right: 8rem; 31 color: #000; 32 } 33 h2 { 34 text-align: center; 35 text-transform: uppercase; 36 margin-bottom: 0; 37 } 38 span { 39 display: block; 40 margin: 0; 41 text-align: center; 42 font-size: 3rem; 43 } 44 a { 45 46 display: inline-block; 47 position: absolute; 48 right: 50vw; 49 bottom: 0; 50 z-index: 2; 51 padding: 10px 10px 110px; 52 overflow: hidden; 53 color: #fff; 54 font-size: 14px; 55 font-family: 'Josefin Sans', sans-serif; 56 line-height: 1; 57 letter-spacing: .2em; 58 text-transform: uppercase; 59 text-shadow: 0 0 7px rgba(0, 0, 0, 1) !important; 60 text-decoration: none; 61 writing-mode: vertical-lr; 62 63 &::after { 64 content: ''; 65 position: absolute; 66 bottom: 0; 67 left: 50%; 68 width: 1px; 69 height: 100px; 70 background: #fff; 71 } 72 &::before { 73 content: ''; 74 position: absolute; 75 bottom: 0; 76 left: 50%; 77 width: 1px; 78 height: 100px; 79 background: rgba(255, 255, 255, .4); 80 } 81 &::after { 82 animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite; 83 } 84 @keyframes sdl { 85 0% { 86 transform: scale(1, 0); 87 transform-origin: 0 0; 88 } 89 50% { 90 transform: scale(1, 1); 91 transform-origin: 0 0; 92 } 93 50.1% { 94 transform: scale(1, 1); 95 transform-origin: 0 100%; 96 } 97 100% { 98 transform: scale(1, 0); 99 transform-origin: 0 100%; 100 } 101 } 102 } 103 div { 104 &.portfolio-detail-0 { 105 background-image: 106 url(file:///Users/ryoyokoyama/pythonBox/portfolio/img/portfolio-detail0.jpg); 107 height: 50vh; 108 width: 70vw; 109 background-size: cover; 110 position: relative; 111 top: 300px; 112 right: -25vw; 113 z-index: 2; 114 } 115 &.portfolio-detail-1 { 116 background-color: burlywood; 117 height: 50vh; 118 width: 70vw; 119 background-size: cover; 120 position: relative; 121 top: 550px; 122 right: -25vw; 123 z-index: 2; 124 } 125 &.portfolio-detail-2 { 126 background-color: burlywood; 127 height: 50vh; 128 width: 70vw; 129 background-size: cover; 130 position: relative; 131 top: 800px; 132 right: -25vw; 133 z-index: 2; 134 } 135 &.btn { 136 position: relative; 137 top: 1500px; 138 z-index: 3; 139 a { 140 &.btn--orange { 141 color: #fff; 142 background-color: #eb6100; 143 } 144 145 &.btn--orange:hover { 146 color: #fff; 147 background: #f56500; 148 } 149 150 &.btn-c { 151 font-size: 1.8rem; 152 position: relative; 153 padding: 1.5rem 2rem 1.5rem 2rem; 154 border-radius: 100vh; 155 } 156 157 &.btn-c i.fa { 158 margin-right: 1rem; 159 } 160 } 161 } 162 163 div { 164 label { 165 &.label1 { 166 display: block; 167 margin: 0 0 4px 0; 168 padding : 15px; 169 line-height: 1; 170 color :#fff; 171 background : green; 172 cursor :pointer; 173 } 174 div { 175 176 } 177 } 178 input { 179 display: none; 180 &#type1:checked ~ #links1 div { 181 height: 54px; 182 opacity: 1; 183 } 184 } 185 label { 186 &.slide { 187 margin: 0; 188 padding: 0; 189 background :#f4f4f4; 190 list-style: none; 191 } 192 div { 193 &.view-box { 194 height: 0; 195 overflow: hidden; 196 -webkit-transition: all 0.5s; 197 -moz-transition: all 0.5s; 198 -ms-transition: all 0.5s; 199 -o-transition: all 0.5s; 200 transition: all 0.5s; 201 } 202 } 203 } 204 } 205 }

js

1var nystories = document.querySelector(".anchor").offsetTop; 2window.onscroll = function gradation() { 3 if (window.pageYOffset > 0) { 4 var opac = (window.pageYOffset / nystories); 5 console.log(opac); 6 document.body.style.background = "linear-gradient(rgba(51,102,102," + opac + "), rgba(0,51,51," + opac + ")), url(file:///Users/ryoyokoyama/pythonBox/portfolio/img/portfolio-main.jpg) no-repeat"; 7 } 8}

試したこと

&#type1:checked ~ #links1 div {
height: 54px;
opacity: 1;

に問題があることは分かったのですが、対処法が分かりません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/08/01 16:21

sassかなにかでしょうか? 命題にある画像が記載されていないようですが・・・
hatena19

2020/08/01 16:39

「画像をクリックしてもアコーディオンが開きません。」とのことですが、提示のコードには画像はどこにもありませんが、どれのことでしょうか。 提示のコードではラベル(緑色の部分)をクリックするとアコーディオンは開いて「aaa」が表示されるのは確認できました。
RyoYo

2020/08/02 01:50

修正依頼ありがとうございます。 画像の部分を追加しました。
hatena19

2020/08/02 03:42

提示のコードで確認してみましたが、画像のクリックでもアコーディオンは開きますね。(画像は手持ちのものを適当に使いました。) 症状を再現できるコードを提示してもらわないと原因の特定は難しいかと。
RyoYo

2020/08/03 17:55

確認ありがとうございます。 以前のコードに加えて、関係のありそうな部分を貼りました。 よろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問