mk-toolブログ

エンジニアと家のことをごちゃごちゃと書いてます

【js】次の要素を取得・隠す

javascript

<button>非表示へ</button>
<div id="next">これが消えます<div>
function hideNext(e){
  var nextElement = e.nextElementSibling;
  if (nextElement.style.display !== 'none') {
        nextElement.style.display = 'none';
        e.innerHTML = ' 表示 ';
    }
    else {
        nextElement.style.display = 'block';
        e.innerHTML = '非表示';
    }
}

jQuery

<button onclick="hideNext(this)">非表示へ</button>
<div id="next">これが消えます<div>
$(document).ready(function(){
  $("button").click(function() {
    var nextElement = $(this).next();
    var nextId = nextElement.attr("id");
    $("#" + nextId).toggle()
  });
});