I am looking to create an accordion feature. The idea is that when the user clicks on "Show," the text "Show" should be hidden, and the content along with a "Close" button should be displayed. Then, when the user clicks on "Close," the content and "Close" button should be hidden, and the "Show" button should be shown again.
It is important for all text to be in the HTML rather than in JavaScript. I also need this functionality to work with dynamic ID posts in Wordpress, so that more content can be shown and hidden on the index page.
I have made an attempt at implementing this, but unfortunately, the "Close" button does not seem to work as expected.
This feature needs to work with multiple ID items since it will be connected to the index posts page in WordPress.
Is it possible to change the class of the show/close buttons? Ideally, clicking on the parent element of the "Show" button would change the class of another element, and clicking on the parent element of the "Close" button would change the class of yet another element.
var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
var $target = $('#' + this.id + 'show').show();
$contents.not($target).hide();
});.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab1" class="tab">Show 1</div>
<div id="tab1show" class="tab-content">
content 1
<div class="close">close</div>
</div>
<br><br><br>
<div id="tab2" class="tab">Show 2</div>
<div id="tab2show" class="tab-content">
content 2
<div class="close">close</div>
</div>