JQueryによる表示非表示に関して

前提・実現したいこと

jQueryを用いて
「チェックボックスにチェックされたらdivで囲まれた部分を開く。また、チェックボックスはCSSを用いて隠し、
上にlabelタグを用いてその中の文字列と共に四角い枠にする」
というものを作ろうとしています。

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

Google Chromeの検証を見るとエラーは出ておらず、チェックボックス隠蔽とlabelタグの部分は問題ありませんが、
チェックをしてもdivで囲まれた部分が表示されません。
また、下記のコードでは全ての四角の枠が重なり合います。
尚、チェックをしたか否かはjQueryで確認し、Google Chromeの検証を用いてチェックをしたかは確認してあります。
また、CSSとJavascriptのソースはPHPファイルに埋め込んであります。

該当のソースコード

Js
1$(funtion(){
2	var prop= $('.survey').prop('checked');
3	$('.hidden_show').css('display', 'none');
4	if(prop){
5		$('.hidden_show').show(120);
6		}
7
8});

HTML
1    <p><label for="label1" class="survey_l">属性</label>
2    <input type="checkbox" id="label1" class="survey"></p>
3    <div class="hidden_show">
4<!--非表示部分-->
5</div>
6<!--これと同じように続いていきますが
7今表示している部分においてdivタグとinputタグのクラスはこの後に続くものも一緒ですがidは全て異なります。
8また、divタグの中にはinputタグ、selectタグ、textareaタグ、spanタグ(クラスは無し。用いるのはすべて名前が異なるid属性)を用いています。
9尚、divタグの全てのクラスが同じなのはあくまでも便宜上の都合です。-->

CSS
1<style type="text/css">
2.survey_l{
3    padding: 15px;
4    font-weight: bold;
5    border: solid 2px black;
6    cursor :pointer;
7}
8
9/*チェックは見えなくする*/
10 .survey {
11    display: none;
12}
13
14/*中身を非表示にしておく*/
15  .hidden_show {
16    display: none;
17/*     height: 0;
18    padding: 0;
19    overflow: hidden;
20    opacity: 0;
21    transition: 0.8s;  */
22}

試したこと

CSSの最後の部分のdisplay:none;を消してコメントアウトを解除すると四角の枠が重なりませんが状況は変わりませんでした。
また、Javascriptの変数propをチェックボックスのidにしましたがそれでも状況は変わりませんでした。

補足情報（FW/ツールのバージョンなど）

jQuery:3.2.0
jQueryはheadタグの中で既に読み込んでおり、パスも正しいです。

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

回答1件

ベストアンサー

あなたの意図している動きはこんな感じでしょうか?
(jQueryに依存しない形で作ってみました)

HTML
1<p class="controller hidecontents">
2	<label>属性<input type="checkbox" autocomplete="off"/></label>
3</p>
4<div>
5contents<br/>
6contents<br/>
7contents<br/>
8contents<br/>
9contents<br/>
10contents
11</div>

CSS
1input[type="checkbox"]{
2	display: none;
3}
4p.controller+div{
5	transition: all 120ms ease-in-out;
6	overflow: hidden;
7	background-color: yellow;
8	line-height: 2ex;
9}
10p.controller.hidecontents+div{
11	line-height: 0ex;
12	opacity: 0;
13}

JavaScript
1document.onchange = e => {
2	const target = e.target;
3	const p = target.closest("p.controller");
4	if(!p){return;}
5	p.classList[target.checked ? "remove": "add"]("hidecontents");
6}

http://jsdo.it/defghi1977/aY1x

もっとシンプルに出来るのではなかろうか？と試してみたもの.
input[type="checkbox"]だと, 選択状態と表示状態が重複するため, classList.toggleを使ってクラスの存在有無に状態を集約してみたもの.

3/30追記:
pointer-eventsを指定しないとクリックイベントが発生しにくいという問題が合ったのを修正しました.

CSS
1p.controller+div{
2	transition: all 120ms ease-in-out;
3	line-height: 1em;
4	background-color: yellow;
5	pointer-events: unset;
6}
7p.controller.hidecontents+div{
8	line-height: 0em;
9	opacity: 0;
10	pointer-events: none;
11}

HTML
1<p class="controller hidecontents" onclick="this.classList.toggle('hidecontents')">
2	属性
3</p>
4<div>
5contents<br/>
6contents<br/>
7contents<br/>
8contents<br/>
9contents<br/>
10contents
11</div>