티스토리, 더보기 | 접기 만들기

 

 

    

 

 

details, summary 태그가 아닌 레이어로 구현하기

 

 

[Demo] 티스토리, 더보기 | 접기 만들기 with Layer

 

 

 

 

 

 

Code

 

<!-- 서식 -->

<p>&nbsp;</p>
<div class="myML">
    <p class="hl">펼치기|접기</p>
    <div>
        <p>내용</p>
        <p>내용</p>
        <p>내용</p>
    </div>
</div>
<p>&nbsp;</p>

 

 

/* 사용자 설정 시작 */
:root {
    --ml-width:100%; /* 더보기 레이어 너비 */
    --ml-margin:28px auto; /* 더보기 레이어 간격 */
    --ml-head-font-weight:900;  /* 제목글 글씨 굵기 */
    --ml-head-margin-right:6px; /* 제목글 앞의 기호의 간격 */
    --ml-head-vertical-align:sub; /* 제목글 앞 기호의 수평 정렬 */
    --ml-head1-symbol:'\208a'; /* 접힌 상태의 제목글 앞의 기호 */
    --ml-head2-symbol:'\208b'; /* 펼쳐진 상태의 제목글 앞의 기호 */
    --ml-head-symbol-size:40px; /* 제목글 앞 기호의 크기 */
    --ml-head-hover-color:red; /* 제목글 마우스 호버시의 색상 */
    --ml-content-padding:0px; /* 내용이 출력되는 레이어의 여백 */
    --ml-content-bgcolor:transparent; /* 내용이 출력되는 레이어의 배경색 */
    --ml-content-text-align:left; /* 내용이 출력되는 레이어의 글자 정렬 */
    --ml-content-line-height:30px; /* 내용이 출력되는 레이어의 줄 간격 */
    --ml-content-figure-margin:0px; /* 이미지블럭 간격 */
    --ml-content-figure-padding:0px; /* 이미지블럭 여백 */
    --ml-content-img-width:100%; /* 이미지블럭 내 사진의 너비 */
    --ml-content-img-margin:4px auto; /* 이미지블럭 내 사진의 간격 */
}
/* 사용자 설정 끝 */

.myML { width:var(--ml-width); margin:var(--ml-margin) }
.myML p.hl:hover { cursor:pointer; color:var(--ml-head-hover-color) }
.myML p.hl.less.last { display:none }
.myML p.hl::before { content:var(--ml-head1-symbol); font-size:var(--ml-head-symbol-size); font-weight:var(--ml-head-font-weight); margin-right:var(--ml-head-margin-right); vertical-align:var(--ml-head-vertical-align) }
.myML p.hl.less::before { content:var(--ml-head2-symbol); font-size:var(--ml-head-symbol-size); font-weight:var(--ml-head-font-weight); margin-right:var(--ml-head-margin-right); vertical-align:var(--ml-head-vertical-align) }
.myML div { display:none; width:calc(100% - (var(--ml-content-padding) * 2)); height:fit-content; margin:0px auto; padding:var(--ml-content-padding); background-color:var(--ml-content-bgcolor) }
.myML div.reveal { display:block }
.myML div.reveal p { text-align:var(--ml-content-text-align); line-height:var(--ml-content-line-height) }
.myML div.reveal figure { margin:var(--ml-content-figure-margin); padding:var(--ml-content-figure-padding) }
.myML div.reveal figure > img { width:var(--ml-content-img-width) !important; height:auto; margin:var(--ml-content-img-margin) }

@media screen and (max-width:860px) {
    .myML p.hl::before { vertical-align:bottom }
    .myML p.hl.less::before { vertical-align:bottom }
}

 

 

const _0x28421d=_0x1b17;function _0x3ed4(){const _0x145d9c=['removeAttribute','querySelector','8nmaGyQ','remove','add','insertAdjacentHTML','none','querySelectorAll','addEventListener','div','getItem','reveal','innerText','p.hl','setAttribute','split','beforeend','block','12565458WLvXLD','.myML','10aEFIDf','parentElement','3750008TjMilP','setItem','</p>','style','click','scrollTo','5646mwfIew','<p\x20class=\x22hl\x20less\x20last\x22>','p.hl:first-child','class','forEach','4973633TFQbNu','45YsMmIO','101940UaFtRX','p.hl.less.last','getAttribute','auto','classList','less','15750251iUcZFo','1630383vNGxCm','display','358NHgrwG','push','mlPos','nextElementSibling'];_0x3ed4=function(){return _0x145d9c;};return _0x3ed4();}(function(_0x499a88,_0x230ab1){const _0xdbd036=_0x1b17,_0x3538c5=_0x499a88();while(!![]){try{const _0x28c2da=parseInt(_0xdbd036(0x163))/0x1+-parseInt(_0xdbd036(0x165))/0x2*(-parseInt(_0xdbd036(0x155))/0x3)+parseInt(_0xdbd036(0x14f))/0x4+parseInt(_0xdbd036(0x15b))/0x5*(parseInt(_0xdbd036(0x15c))/0x6)+parseInt(_0xdbd036(0x15a))/0x7*(parseInt(_0xdbd036(0x16b))/0x8)+-parseInt(_0xdbd036(0x14b))/0x9+-parseInt(_0xdbd036(0x14d))/0xa*(parseInt(_0xdbd036(0x162))/0xb);if(_0x28c2da===_0x230ab1)break;else _0x3538c5['push'](_0x3538c5['shift']());}catch(_0x559bb7){_0x3538c5['push'](_0x3538c5['shift']());}}}(_0x3ed4,0xe589d));function _0x1b17(_0xbb1966,_0x35628d){const _0x3ed4bc=_0x3ed4();return _0x1b17=function(_0x1b17fb,_0x284110){_0x1b17fb=_0x1b17fb-0x14a;let _0x4cf72a=_0x3ed4bc[_0x1b17fb];return _0x4cf72a;},_0x1b17(_0xbb1966,_0x35628d);}if(document[_0x28421d(0x16a)]('body')['id']=='tt-body-page'&&document[_0x28421d(0x16a)](_0x28421d(0x14c))){let mlhl,hlM,hlL,mlhlArr=[];document[_0x28421d(0x170)](_0x28421d(0x14c))[_0x28421d(0x159)](function(_0x46daba,_0x5cc7c6){const _0xec6fee=_0x28421d;mlhl=_0x46daba[_0xec6fee(0x16a)](_0xec6fee(0x157))['innerText'],mlhl=mlhl[_0xec6fee(0x178)]('|'),hlM=mlhl[0x0],hlL=mlhl[0x1],mlhlArr[_0xec6fee(0x166)]([hlM,hlL]),_0x46daba[_0xec6fee(0x16a)](_0xec6fee(0x157))[_0xec6fee(0x175)]=hlM,_0x46daba[_0xec6fee(0x16e)](_0xec6fee(0x179),_0xec6fee(0x156)+hlL+_0xec6fee(0x151)),_0x46daba[_0xec6fee(0x16a)](_0xec6fee(0x15d))[_0xec6fee(0x171)]('click',function(){const _0x542630=_0xec6fee;_0x46daba[_0x542630(0x16a)](_0x542630(0x157))[_0x542630(0x160)]['remove'](_0x542630(0x161)),_0x46daba['querySelector']('p.hl:first-child')[_0x542630(0x175)]=mlhlArr[_0x5cc7c6][0x0],_0x46daba[_0x542630(0x16a)]('p.hl.less.last')[_0x542630(0x152)][_0x542630(0x164)]='none',_0x46daba['querySelector'](_0x542630(0x172))[_0x542630(0x169)](_0x542630(0x158)),sessionStorage[_0x542630(0x150)](_0x542630(0x167),window['scrollY']-0x1a),setTimeout(()=>{const _0x35ac2b=_0x542630;window[_0x35ac2b(0x154)]({'top':sessionStorage[_0x35ac2b(0x173)]('mlPos'),'behavior':_0x35ac2b(0x15f)});},0x64);});}),setTimeout(()=>{const _0xd8e3e6=_0x28421d;document['querySelectorAll'](_0xd8e3e6(0x14c))[_0xd8e3e6(0x159)](function(_0x270e93,_0x56787a){const _0x3a4eb5=_0xd8e3e6;let _0x21df24=_0x270e93[_0x3a4eb5(0x16a)](_0x3a4eb5(0x176));_0x21df24[_0x3a4eb5(0x171)](_0x3a4eb5(0x153),function(){const _0x450920=_0x3a4eb5;if(_0x21df24[_0x450920(0x15e)](_0x450920(0x158))=='hl')_0x21df24[_0x450920(0x160)][_0x450920(0x16d)](_0x450920(0x161)),_0x21df24[_0x450920(0x175)]=mlhlArr[_0x56787a][0x1],_0x21df24[_0x450920(0x168)][_0x450920(0x177)](_0x450920(0x158),_0x450920(0x174)),_0x21df24[_0x450920(0x14e)][_0x450920(0x16a)]('p.hl.less.last')[_0x450920(0x152)][_0x450920(0x164)]=_0x450920(0x14a);else _0x21df24['getAttribute']('class')=='hl\x20less'&&(_0x21df24[_0x450920(0x160)][_0x450920(0x16c)](_0x450920(0x161)),_0x21df24[_0x450920(0x175)]=mlhlArr[_0x56787a][0x0],_0x21df24['parentElement'][_0x450920(0x16a)](_0x450920(0x15d))[_0x450920(0x152)][_0x450920(0x164)]=_0x450920(0x16f),_0x21df24[_0x450920(0x14e)][_0x450920(0x16a)](_0x450920(0x172))[_0x450920(0x169)]('class'));});});},0x12c);}