🌟
jsでコンテンツを表示、非表示するやつ作った。
ボタンを押すと、下にコンテンツが表示されるやつを製作。
自分以外の表示ボタンが押されると、自動で非表示になります。
アニメーションバージョンも製作しました。
アニメーションが入ると、実装が複雑になり,
わかりにくくなる可能性があるので、
普通バージョン
アニメーションバージョンの順に
紹介します。
おまけとして、自作したテンプレートライブラリを使用した場合も掲載。
普通バージョン
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>親要素で状態管理</title>
<style>
.content {
display: none; /* 初期状態では非表示 */
}
</style>
</head>
<body>
<!-- 親要素で状態を管理 -->
<div class="container">
<button onclick="toggleContent(this)">コンテンツ1を表示</button>
<div class="content">
これはコンテンツ1です。
</div>
</div>
<div class="container">
<button onclick="toggleContent(this)">コンテンツ2を表示</button>
<div class="content">
これはコンテンツ2です。
</div>
</div>
<div class="container">
<button onclick="toggleContent(this)">コンテンツ1を表示</button>
<div class="content">
これはコンテンツ1です。
</div>
</div>
<div class="container">
<button onclick="toggleContent(this)">コンテンツ2を表示</button>
<div class="content">
これはコンテンツ2です。
</div>
</div>
<div class="container">
<button onclick="toggleContent(this)">コンテンツ1を表示</button>
<div class="content">
これはコンテンツ1です。
</div>
</div>
<script>
function toggleContent(button) {
const containers = document.querySelectorAll('.container');
containers.forEach(container => {
const content = container.querySelector('.content');
if (container === button.parentElement) {
// クリックされたコンテンツの表示状態を切り替える
if (content.style.display === 'none' || content.style.display === '') {
content.style.display = 'block';
button.textContent = button.textContent.replace('表示', '非表示');
} else {
content.style.display = 'none';
button.textContent = button.textContent.replace('非表示', '表示');
}
} else {
// 他のコンテンツを非表示にする
content.style.display = 'none';
const otherButton = container.querySelector('button');
otherButton.textContent = otherButton.textContent.replace('非表示', '表示');
}
});
}
</script>
</body>
</html>
アニメーション含みバージョン
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>親要素で状態管理 with アニメーション</title>
<style>
</style>
</head>
<body>
<!-- コンテナ要素を追加 -->
<div class="container">
<button onclick="toggleContent(this)">コンテンツ1を表示</button>
<div class="slide-down-container">
<div class="slide-down-content">
これはコンテンツ1です。
</div>
</div>
</div>
<div class="container">
<button onclick="toggleContent(this)">コンテンツ2を表示</button>
<div class="slide-down-container">
<div class="slide-down-content">
これはコンテンツ2です。
</div>
</div>
</div>
<script>
function toggleContent(button) {
const containers = document.querySelectorAll('.container');
const currentContainer = button.parentElement;
const currentContent = currentContainer.querySelector('.slide-down-container');
const isActive = currentContent.style.maxHeight !== '0px' && currentContent.style.maxHeight !== '';
containers.forEach(container => {
const content = container.querySelector('.slide-down-container');
const btn = container.querySelector('button');
if (container === currentContainer) {
// 現在のコンテンツをトグル
if (isActive) {
content.style.maxHeight = '0';
button.textContent = button.textContent.replace('非表示', '表示');
} else {
content.style.maxHeight = content.scrollHeight + 'px';
button.textContent = button.textContent.replace('表示', '非表示');
}
} else {
// 他のコンテンツを非表示
content.style.maxHeight = '0';
btn.textContent = btn.textContent.replace('非表示', '表示');
}
});
}
function set_style() {
// 既にスタイルが追加されているかチェック
const existingStyle = document.getElementById('slide-down-style');
if (existingStyle) return;
// Style要素の作成
const style = document.createElement('style');
style.id = 'slide-down-style'; // 重複防止用ID
style.textContent = `
.slide-down-container {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
`;
// headに追加
document.head.appendChild(style);
}
set_style();
</script>
</body>
</html>
おまけ
自分が作ったtemplateライブラリをかましてみた
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>親要素で状態管理 with アニメーション</title>
<style>
</style>
</head>
<body>
<div class="replace">
<div class="container">
<button onclick="toggleContent(this)" class="rep_name">コンテンツ1を表示</button>
<div class="slide-down-container">
<div class="slide-down-content rep_item">
これはコンテンツ1です。
</div>
</div>
</div>
</div>
<div class="p_temp container" >
<div class="rep_name">表示</div>
<div class="rep_item">コンテンツ内容を変更しました</div>
</div>
<div class="p_temp container" >
<div class="rep_name">表示</div>
<div class="rep_item">コンテンツ内容を変更しました</div>
</div>
<div class="p_temp container" >
<div class="rep_name">表示</div>
<div class="rep_item">コンテンツ内容を変更しました</div>
</div>
<div class="p_temp container" >
<div class="rep_name">表示</div>
<div class="rep_item">コンテンツ内容を変更しました</div>
</div>
<script src="temp.js"></script>
<script>
function toggleContent(button) {
const containers = document.querySelectorAll('.container');
const currentContainer = button.parentElement;
const currentContent = currentContainer.querySelector('.slide-down-container');
const isActive = currentContent.style.maxHeight !== '0px' && currentContent.style.maxHeight !== '';
containers.forEach(container => {
const content = container.querySelector('.slide-down-container');
const btn = container.querySelector('button');
if (container === currentContainer) {
// 現在のコンテンツをトグル
if (isActive) {
content.style.maxHeight = '0';
button.textContent = button.textContent.replace('非表示', '表示');
} else {
content.style.maxHeight = content.scrollHeight + 'px';
button.textContent = button.textContent.replace('表示', '非表示');
}
} else {
// 他のコンテンツを非表示
content.style.maxHeight = '0';
btn.textContent = btn.textContent.replace('非表示', '表示');
}
});
}
function set_style() {
// 既にスタイルが追加されているかチェック
const existingStyle = document.getElementById('slide-down-style');
if (existingStyle) return;
// Style要素の作成
const style = document.createElement('style');
style.id = 'slide-down-style'; // 重複防止用ID
style.textContent = `
.slide-down-container {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
`;
// headに追加
document.head.appendChild(style);
}
set_style();
</script>
</body>
</html>
temp.jsはこちらから
Discussion