Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【js】JavaScriptで「show / hide 」を書いてみた

やっとできた⁉︎

ただ、多分余計な記述も多そうだけど一応upしときます。

後で自分の進歩も分かるので。

 

誰かの参考になる可能性は…低いですw

 

 

経緯

はてなブログできたテーマ制作の際に、エディタではてなブログの仮想環境を作っていて、「#box2 のアーカイブ」のボタン表示/非表示がうまく作動しなかったので。

ボタン操作のjsソースの在処もどれか分からなかったのでw

 

デモ-1

「if」statement を使った show/hide

JS Bin on jsbin.com

 

Javascript

var btn = document.querySelector(".archive-module-button");
var btn__hide = document.querySelector(".archive-module-hide-button");
var btn__show = document.querySelector(".archive-module-show-button");
var btn__contents = document.querySelector(".archive-module-months");

btn__hide.style.display = "none";
btn__contents.style.display = "none";
btn.addEventListener("click", btnToggle );

    function btnToggle(){
    
        if( btn__contents.style.display == "none" ){
            btn__show.style.display = "none";
            btn__hide.style.display = "block";
            btn__contents.style.display = "block";
        }else{
            btn__show.style.display = "block";
            btn__hide.style.display = "none";
            btn__contents.style.display = "none";
        }
    }

多分凄く無駄が多い気がします。何となくw

デモ-2

HTML DOM「element.classList.toggle」プロパティを使った show/ hide

JS Bin on jsbin.com

 

Javascript

var btn = document.querySelector(".hide-btn");
var btn__Content = document.querySelector(".list-content");
btn.onclick = function() {myBtn()};
function myBtn() {
    btn.classList.toggle("hide-btn-on");
    btn__Content.classList.toggle("hide-content");
}
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️