【code】點擊展開隱藏 (折疊文字)

Tags:    code  fc2小技巧 

方法一

▼ 製成品如下:

以下內容的收起來嚕~
點我展開/隱藏 (方法一)


▼ code
<a href="javascript:" onclick="document.all.fullContent.style.display=(document.all.fullContent.style.display=='none')?'':'none';document.all.smallContent.style.display=(document.all.smallContent.style.display=='none')?'':'none'">點我展開/隱藏</a>

<div class="block" id="fullContent" style="display:none;">
哎呀被發現了啦 (つд⊂)
</div>


如果要初設定是已顯示文字,第一次點擊行動是收起 --> 在div那行刪除這段就行 style="display: none;"


方法二
(方法二在我這個模版下不好看)

點我展開/隱藏(方法二)



▼ code
<a href="#hide" onclick="if(document.getElementById('hide') .style.display=='none') {document.getElementById('hide') .style.display=''}else{document.getElementById('hide') .style.display='none'}" title="" type="button">點我展開/隱藏(方法二)</a>

<div id="hide" style="display: none;">
哎呀又被發現了啦 (つд⊂)
</div>





方法三 (★ 暫時此方法在fc2使用最簡潔)

點我展開/隱藏(方法三)



▼ code
<a href="javascript:" onclick="hide1.style.display=hide1.style.display=='none'?'':'none'">點我展開/隱藏(方法三)</a>

<span id="hide1" style="display:none">哎呀又又被發現了啦  (つд⊂) </span>





方法四

點我展開/隱藏(方法四)



▼ code
<a href="javascript:;" onclick="document.getElementById('hide123').style.display=(document.getElementById('hide123').style.display=='none'?'':'none');">點我展開/隱藏(方法四)</a>

<span id="hide123" style="display:none">哎呀又又被發現了啦(つд⊂) </span>



方法五
用W3 CSS方法。
W3.CSS tooltips tutorial

如果要用這個w3 css function,記謹要在HTML頭中,連接它的CSS檔哦

在HTML頭中,加上以下
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">




方法六
如果你可以編輯HTML,那這個就是最簡單、最一勞求逸的方法!

(誒在本地測試明明work的,但不知為啥在fc2不行。。。


首先,確保你的HTML有載上jQuery,然後再加上一個script。
總括來說,要在 </body> 完結前加上以下coding。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
$(".hidetogglebtn").click(function(){
$(this).next(".showcontent").slideToggle();
});
});
</script>


然後,每次想要做折疊文字效果時,只要加上 class hidetogglebtnshowcontent 就可以嚕 (還有slide動效呢)

▼ code
<button class="hidetogglebtn">點我展開/隱藏(方法五)</button>
<div class="showcontent" style="display: none;">哎呀又又被發現了啦(つд⊂)</div>




參考:
html ::: 點擊展開= 捏他巴雷語法 - ニコウツ
【文字特效】一段文字的展开/折叠效果 - CSS/HTML - 三零网
W3.CSS tutorial

    來拍拍吧(☞゚∀゚)☞
    點我來抽抽
    隨機文章~