【javascript教學】隱藏及顯示資料最簡單的方式及手風琴元件(accordion)製作

使用javascript讓html元件隱藏或顯示用很多方式，以下介紹最簡單的其中一種方式，只需要一行程式碼，而且元件可以重複利用，非常適合用來製作手風琴元件(accordion)。

就是同時使用inline event handlers及ternary operators。

範例如下

topic 1

topic 2

topic 3

範例程式碼如下：

<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: lightgrey; 
}
  
.content{
  background-color: white;
  text-align: left;
  padding:6px;  
}
</style>
<div class="accordion" onclick="this.childNodes[1].style.display = this.childNodes[1].style.display == 'none' ? 'block' : 'none'">
  topic 1 
  <div class="content" style="display: none;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu 
    tristique libero. Pellentesque aliquam libero eget tempor ultricies.
    Etiam fringilla tincidunt commodo. Aenean consectetur porta nisi ac
    rutrum. Nullam aliquam fringilla lacus, nec cursus sapien pulvinar nec. 
    Aenean nec nisi quis lectus laoreet pretium at id odio. Praesent vehicula 
    maximus justo in semper. Morbi mattis sollicitudin turpis, eget 
    condimentum purus rutrum a. Pellentesque at ligula in ex volutpat 
    scelerisque sed vitae sem. Aliquam tincidunt gravida tellus eu porta. 
    Proin aliquet risus et lectus varius tempus.
  </div>
</div>

<div class="accordion" onclick="this.childNodes[1].style.display = this.childNodes[1].style.display == 'none' ? 'block' : 'none'">
   topic 2
  <div class="content" style="display: none;">
    Sed elementum semper mi, ac consequat mi iaculis eu. Morbi mattis 
    velit sed egestas consequat. Sed ultrices, urna ac auctor consectetur,
    purus est volutpat urna, facilisis scelerisque tortor elit vel nulla. 
    Curabitur dolor sapien, pellentesque sit amet vulputate vel, fringilla
    id est. Phasellus dictum diam sit amet pulvinar mattis. Sed aliquet
    ornare tortor, ac gravida urna porta in. Donec euismod sit amet ante in
    vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et
    ultrices posuere cubilia curae; Cras gravida metus id dolor vestibulum,
    vel euismod magna elementum. Nullam viverra tristique facilisis. Suspendisse
    malesuada imperdiet maximus.
  </div>
</div>

<div class="accordion" onclick="this.childNodes[1].style.display = this.childNodes[1].style.display == 'none' ? 'block' : 'none'">
   topic 3 
  <div class="content" style="display: none;">
    Donec a malesuada mauris, ac elementum erat. Nunc condimentum urna
    porta suscipit consectetur. Cras in ligula non lacus dictum pulvinar.
    Nulla fringilla metus eu lectus vestibulum, non aliquam libero pretium.
    Fusce vel dui molestie, vulputate purus ac, tincidunt nibh. Pellentesque
    in ullamcorper justo. Donec egestas pulvinar nisl ut lacinia. Ut
    eleifend sem nec elit dignissim ullamcorper. Etiam vehicula fermentum scelerisque.
  </div>
</div>

留言

這個網誌中的熱門文章

母體變異數(population variance)、樣本變異數(sample variance)及自由度(degrees of freedom)

母體指的是所有的數據，樣本指的是從母體抽樣的數據，舉例來說，一個班級有40人，它們的身高，40個身高數據，若只針對這個班，就是母體，但是，卻只是代表全校學生身高的一部分，也就是樣本。回到「機率統計」頁面樣本平均數(mean)不是母體平均數，樣本變異數(variance)也不是母體變異數，一個班40個人身高的平均數很難剛好是全校學生的身高平均數。一個班40個人的身高變異數也不會是全校學生的身高變異數。變異數計算母體變異數的定義如下：而樣本變異數的定義如下：奇怪的地方平均數雖然樣本平均數不是母體平均數，不過，如果不斷重複從同一個母體抽樣平均，會得到一個近似母體平均數的數字。舉例來說，從一個學校所有學生中，不斷隨機選出40個學生取平均數，再將這些平均數平均，結果會接近直接算全校學生的身高平均數。也就是說樣本平均數的期望值就是母體平均數：變異數樣本變異數跟母體變異數就沒這麼單純了。奇怪的地方是，為什麼樣本變異數公式的除術是n-1，而不是像平均數計算一樣用n？為何樣本變異數要除的是(n-1)？除數為n的話，變異數會太小如果樣本變異數的除數是n，樣本變異數就會常常比母體變異數小。為什麼呢？因為，樣本是從母體抽取的，抽樣的數據算出平均，並且抽樣的數據會相對的接近抽樣的平均，總不會剛好抽出的樣本平均數剛好是母體平均數，且樣本數據離樣本平均數就像母體數據離母體平均數一樣分散吧？假設母體數據為0-99的整數，共100個數據，從中選出10個數字，然後計算樣本的平均數，分別用n及n-1當作除數算出變異數，連續執行200次，並將200個樣本平均數及200個樣本變異數平均。也就是取得樣本平均數及樣本變異數的期望值，結果如下：母體平均數 = 49.5 ...

如何在Chart.js的圖上加上X軸或Y軸名稱

Chart.js可以幫助網頁顯示各類圖表，要在X軸及Y軸上標示名稱方法如下：找到Chart物件。在Chart物件內找到options。在options內找到scales，若無，自行加上scales。即可在scales下設定X軸及Y軸的標示。程式碼範例 <div> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const labels = [ '1', '2', '3', '4', '5', '6', ]; const data = { labels: labels, datasets: [{ label: '數據', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], }] }; const config = { type: 'line', data, options: {scales:{ x:{ title:{ display:true, text:"月" } }, y:{ title:{ display:true, text:"unit" } } } } }; var myChart = new Chart( document.ge...

Blogger文章在Google搜尋引擎找不到，怎麼辦？

剛開始經營部落格，最令人不解及懊惱的其中一件事就是為什麼我的文章發布了，在Google搜尋引擎不管怎麼搜尋都找不到；文章找不到就沒辦法建立自然流量了。回到「部落格經營血淚史」頁面 Google Search Console無法為Blogger建立索引，出現伺服器錯誤(5XX)⇨ 這是因為Google搜尋引擎還沒將新的文章或網頁放進去索引(index)裡。可以用手動的方式，將新文章或網頁加入Goolge搜尋引擎索引裡。首先，在Google搜尋「google search console」。進去後，輸入網站網址如下圖，兩者選其一。輸入網站網址並點點擊「繼續後」後，選擇「前往資源」。視窗上側，找到「檢查XXX中的任何網址」，輸入要加入Google搜尋引擎索引的網頁(文章)網址。如果該網頁不在Google搜尋引擎索引內，結果會出現「網址不在 Google 服務中」，這時需點擊「要求建立索引」。這樣就完成了；大概過4-6天就會編入Google搜尋引擎索引了，不過，不需要一直重新提出建立索引的要求，因為這樣不會比較快編入索引。如何提交Blogger Sitemap？到Google Search Console的Sitemap，填入落格網址並加上 /sitemap.xml ，舉例來說，我的部落格就是https://quanist.blogspot.com/sitemap.xml，送出即可。送出之後要等大約10分鐘，正常來說就會從「Couldn't fetch 」轉為顯示「成功」。如何提交Blogger Atom Sitemap？文章數少於500篇：到Google Search Console的Sitemap，填入部落格網址並加上 /atom.xml?redirect=false&start-index=1&max-results=500 ，舉例來說，我的部落格就是https://quanist.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500，送出即可。文章數少於1000篇：到Google Search Cons...

中央極限定理(central limit theorem)證明

中央極限定理(central limit theorem )指的是從一個獨立同分布(Independent and identically distributed, i.i.d)取出之變數數量趨近無限多時，其平均數(mean)將趨近常態分布(normal distribution)。回到「機率統計」頁面目錄：動差母函數(moment generating function) 常態分布的動差母函數中央極限定理證明中央極限定理模擬中央極限定理應用動差母函數(moment generating function) 動差母函數為機率密度函數(probability density fFunction, PDF）及累積分佈函數(cumulative distribution function CDF)之外，另一種描述機率分布模型的一種方式。定義 M X (t) = E[e tx ] 而 e tx 的泰勒級數(Taylor series)為 e tx = 1 + tx + t 2 x 2 /2! + t 3 x 3 /3! + ... 則 M X (t) 的泰勒級數為 M X (t) = E[e tx ] = 1 + tE[x] + t 2 /2! E[x 2 ] + t 3 /3! E[x 3 ] + ... 因此，當t = 0時，以t取動差母函數m次微分，就可以找到其分布模型的第m動差。特性 M X+Y (t) = E[e t(x+y) ] = E[e tx+ty ] = E[e tx e ty ] = E[e tx ] E...

HYG、LQD 與 TLT 風險報酬比較

10 年期公債除了站上 4%，再撰寫這篇文章時，已經在 4.3% 徘迴，上次在這篇文章研究了現在是否應該要買 LQD 而不是 TLT，本篇文章我想研究非投資等級債是否更適合。買點 HYG 現在 HYG 價格為 74.04，距離近一次低點 2020/3/20 的 69.75，差別為 5.794% LQD 上次低點在 2020/10/14 的 100.38 附近，與目前的 105.01 相差 4.612%。 TLT 上次低點在 2022/11/4 的 94.22 附近，與目前的 95.16相差 1%。殖利率上升時，公司債的表現 TLT 2009-01-06 到 2010-01-05 跌了 16.364% 這段期間美國 30 年期公債殖利率從 3.04% 漲到 3.74%，漲了 0.7%。 TLT 2012-11-14 到 2013-11-13 跌了 15.701% 這段期間美國 30 年期公債殖利率從 2.73% 漲到 3.83%，漲了 1.1%。 TLT 2016-07-29 到 2017-07-28 跌了 10.307% 這段期間美國 30 年期公債殖利率從 2.18% 漲到 2.89%，漲了 0.71%。 TLT 2021-11-18 到 2023-8-15 跌了 32.695% 這段期間美國 30 年期公債殖利率從 1.97% 漲到 4.35%，漲了 2.38%。結論 HYG 現在也很便宜，在公債殖利率還有可能持續上漲狀況下，表現可能勝過公債及投資等級公司債。

Google Search Console無法為Blogger建立索引，出現伺服器錯誤(5XX)

這幾天，我把我Blogger的網址改了幾次，為了測試Google是否有把我的網頁加進搜尋索引，我到了Google Search Console做了測試，結果出現錯誤，伺服器錯誤（5xx）！回到「部落格經營」頁面 ⇦Blogger文章在Google搜尋引擎找不到，怎麼辦？ Google AdSense要幾篇文章才能通過之審查甘苦談⇨ 我非常驚訝，我用的是Google自家的部落格平台，怎麼可能被Google封鎖；我想可能是我剛改網址，系統還不允許排入谷歌搜尋引擎。官方網站「Google Search Console說明(註1)」出現的解釋是當 Googlebot 無法存取網址、要求逾時，或是網站處於流量高峰狀態時，就會出現伺服器錯誤。在此情況下，Googlebot 便不得不放棄要求。我能找誰詢問，解決「Googlebot便不得不放棄要求」的問題？我就滿心憂慮地去睡覺了。隔天一早起來，我第一件事就是重新在Google Search Console測試我的網頁，還好過了。真是虛驚一場。另外，如過要查詢伺服器狀態可以到Google Search Console的「設定」去看。點選「設定」。點選「檢索統計資料」的「開始報表」。點選「主機狀態」，即可查看伺服器各種數據。註1擷取自「Google Search Console說明」，https://support.google.com/webmasters/answer/7440203?hl=zh-Hant#zippy=%2C%E4%BC%BA%E6%9C%8D%E5%99%A8%E9%8C%AF%E8%AA%A4，2021/6/13 回到「部落格經營」頁面 ⇦Blogger文章在Google搜尋引擎找不到，怎麼辦？ Google AdSense要幾篇文章才能通過之審查甘苦談⇨

一體成形式馬桶馬桶蓋怎麼拆及上裝式馬桶蓋膨脹螺絲原理介紹

家裡有主臥室廁所馬桶的馬桶蓋緩降有點壞掉，也就是沒有緩降功能，蓋馬桶蓋不小心會「碰」的一聲，關起來。為了省錢，想要自己買馬桶蓋來換就好，就開始了馬桶蓋茶拆除研究之旅。一看到主臥馬桶馬桶蓋才發現，原來沒有我想像的簡單，原因如下：馬桶蓋兩側的空隙非常小，手要伸進去都很困難，何況是要轉鬆裡面的螺絲。費盡千辛萬苦，終於從馬桶左側下方把手伸進去，也頂多只能摸到一邊的螺絲。馬桶右側有一些水管，也就是說我根本不可能把手伸進去，摸到另一側的螺絲。最後，花費了2-3天的偵探式思考，終於想到，說不定馬桶蓋向上拔起就拆除了，果真，只要將馬桶蓋立起來，往上拔就拆掉了。附記：我家主臥廁所馬桶型號為：Derek C693NA 照片及拆除影片馬桶前側照馬桶蓋後側照馬桶上方照馬桶蓋拆除上裝式馬桶蓋膨脹螺絲介紹後來我另外買了上裝式馬桶蓋，包裹拆開來看到零件，附的膨脹螺絲我還是第一次看到，研究許久才知道怎麼裝。原理首先，拿出以下配件，可以看到上面有四個突出部這個配件是用來裝在膨脹螺絲裡面的，它的突出部要跟膨脹螺絲相對應的開口及縫結合然後，將螺絲從另一邊裝入將螺帽從第一步驟介紹的配件端鎖上，直到螺帽進入該配件，與其吻合，接下來塞進安裝馬桶蓋的孔洞中，轉緊螺絲，這時，因為第一步驟的配件4個突出部已經卡住膨脹螺絲，膨脹螺絲已被孔洞夾住，且螺帽也被第一步驟的配件卡住，旋轉螺絲時，配件就會順著螺帽被往上鎖，擠開膨脹螺絲，最後把馬桶蓋安裝座鎖緊。從正面將組裝好的膨脹螺絲塞進馬桶蓋安裝孔中，鎖緊即可

賭徒破產理論(Gambler's ruin)機率公式證明

賭徒破產理論(Gambler's ruin)指指的是兩位賭徒，每局賭1元，A賭徒有i元，B賭徒有n-i元，兩人不斷的賭，直到一人輸光為止。回到「機率統計」頁面前言假設A賭徒勝率為p，輸的機率就是1-p，稱為q，我們要求算A贏光所有錢的機率。讓p(i)代表A賭徒擁有i元的時候，獲得最後勝利的機率。 p(0) = 0，因為已經輸光所有錢並且賭局已結束。 p(n) = 1，因為已經贏光所有錢並且賭局已結束。那麼p(i)呢？遞迴公式(recursive formula) 假設A有i元，它下一局有可能贏，有可能輸。贏的機率為p，輸的機率為1-p = q。不論這一局是贏還是輸，A要贏光所有錢的機率還是沒有算出來。這局贏了，接下來贏光所有錢的機率為p(i+1)。這局輸了，接下來贏光所有錢的機率為p(i-1)。因此，p(i) = p*p(i+1) + q*p(i-1)，且可以繼續延伸，例如p(i+1) = p*p(i+2) + q*p(i)、p(i-1) = p*p(i-) + q*p(i-2)... 每個公式需要套用原本的公式，稱為遞迴公式公式，而遞迴公式解法可以像解微分方程(differential equation)一樣，可以先用猜的！例如dx/dt = rx，微分之後x還是在公式裡，可以先猜測x = e^y。猜測假設，p(i) = x i ，並帶入p(i) = p*p(i+1) + q*p(i-1)，得到 x i = p* x i+1 + q * x i-1 x = p* x 2 + q p* x 2 - x + q = 0 解一元二次方程式得 x = 1 或 x = q/p 微分方程 p(i) = x i ， x = 1 或 x = q/p，且有兩已知數 p(0) = 0 及 p(n) = 1。而x i 的x有兩個根(root)，必須都帶入線性組合(linear combination)公式求解。 p(i) = A(1) i + B ( q/p ) i = A + B ( q/p ) i p(0) = A + B = 0 ， A = -B p(n) = A + B ( q/p ) n = 1 ...

00696B 與 TLT 歷史報酬率比較

00696B and TLT, which is better?

00696B 與 00687B 歷史報酬率比較

00696B and 00687B, which is better?

Quanist 理財智

搜尋此網誌