簡単なアコーディオン

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

CLOSE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<dl class="code-accordion">
	<dt class="ac-head">クリックで内容を表示します</dt>
	<dd class="ac-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ・・・</p>
		<p class="ac-closeButton">CLOSE</p>
	</dd>
</dl>

.code-accordion {
	width: 100%;
	margin: 1rem auto;
	}
.code-accordion .ac-head {
	position: relative;
	margin: 0 0 2px;
	padding: 1.5rem 1rem;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #fff;
	color: #999;
	background: #eee;
	cursor: pointer;
	transition: .5s;
	}
.code-accordion .ac-head:before {
	position: absolute;
	top: 25%;
	right: 3rem;
	content: '';
	width: 24px;
	height: 24px;
	transform: rotate(135deg)!important;
	transition: all .5s;
	border-top: 2px solid #ccc;
	border-right: 2px solid #ccc;
	background: none;
	}

.code-accordion .ac-head.ac-open {
	margin: 0 0 2px;
	padding: 1.5rem 1rem;
	color: #666;
	background: #ccc;
	}
.code-accordion .ac-head.ac-open:before {
	top: 40%;
	transform: rotate(-45deg)!important;
	transition: .5s;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	background: #ccc;
	}

.code-accordion .ac-body {
	line-height: 1.8;
	margin: 0 auto 2rem;
	padding: 1rem;
	border-bottom: 1px solid #ccc;
	background-color: #f6f6f6;
	}
.code-accordion .ac-closeButton {
	color: #c00;
	font-weight: bold;
	text-align: center;
	}

$(function () {
	$('.ac-body').css("display", "none");
	$('.ac-head').on('click', function () {
		$(this).toggleClass('ac-open');	
		$(".ac-head").not(this).removeClass("ac-open");
		$(this).next().slideToggle();
		$('.ac-head').not($(this)).next('.ac-body').slideUp();
	})
	$('.ac-closeButton').on('click', function () {
		$('.ac-head').removeClass('ac-open');	
		$(this).parent('.ac-body').slideUp();
	})
});

CLOSE

<div class="slideOpen">開くよ（開いてたら閉じるよ）</div>
<div class="slideBox">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  <div class="slideClose">閉じるよ</div>
</div>

 /*お好みで*/
.slideOpen,.slideClose {
	cursor:pointer;
	font-weight:bold;
	}
.slideClose {
	font-size:.8em;
	color: #f60;
	margin-bottom: 1em;
	}

$(function(){
    $(".slideBox").after().hide();
    $(".slideOpen").click(function(){
        //$(".slideBox").slideToggle("slow"); //閉じる項目が1つのときはこっち
        $(this).next(".slideBox").slideToggle("slow"); //閉じる項目が2つ以上あるときはこっち
    });
    $(".slideClose").click(function(){
        $(this).parent().slideToggle();
    });
});

CLOSE

<div class="toggleOpen">OPEN</div>
<div class="toggleBox">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>

    $(function(){
        $(".toggleBox").hide();
        $(".toggleOpen").click(function(){
          $(this).next().slideToggle("slow").siblings(".toggleBox").slideUp();
        });
    });

CLOSE