JavascriptでURLパラメータを取得し条件文を作るやり方

JavascriptでURLパラメータを取得し条件文を作るやり方

FAQページへリンクさせることがよくありますが、FAQがすべてアコーディオンになっていて
ユーザーがクリックしないとFAQ内容が表示されないページ構成のとき、引数をつけてJavascriptで引数があるときに条件分岐させることが可能です。
※searchParamsはIE11だと無効な点に注意

CSS

.faq_answer {
    display: none;
    margin-top: 10px;
}
.faq_list{
  border:1px solid red;
  padding:5px;
  background:#eee;
}

JavaScript

//表示URLを取得
var url =  new URL(window.location.href);

// URLについているパラメータを取得
var params = url.searchParams;

//パラメータがあったらスライドダウンさせる
if( params.has('id') ) {
       $('.faq_list:nth-child(2) > .faq_answer').slideDown();
}

$('.faq_trigger').click(function() {
  $(this).next('.faq_answer').slideToggle();
});
    

See the Pen
wvzyxXd by miccyome (@miccyome)
on CodePen.

サンプルとしておいたCodePenのURLはhttps://codepen.io/miccyome/pen/wvzyxXdで、

引数にidをあてるとリストがSlideDownした状態で表示されます。https://codepen.io/miccyome/pen/wvzyxXd?id=2