Hello Stack Overflow contributors,
I am using the jQuery UI plugin for the accordion. I also have a show hide function. When a user selects an accordion header item the div slides the content open correctly. I have a paragraph of content and then a show hide toggle for "Read more" and "Hide".
My problem is when someone makes their accordion selection to see the available content and clicks "Read more" then decides to click another accordion selection with out clicking "Hide" the next slide has the "Read more" content visible but now says "Read more" instead of "Hide".
What I would like to accomplish is to have each accordion selection "Read more" to work as intended with out it effecting multiple accordion selections. If you have suggestions to minimize the show hide toggle also that would be great. Thank you in advance!
The code is as follows:
<link rel="stylesheet" href="../css/style.css">
<div id="accordion2">
<h4>Accordion selection 1</h4>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="slidingDiv">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p><a href="#" class="show_hide" >Read more</a></p>
</div>
<h4>Accordion selection 2</h4>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="slidingDiv">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p><a href="#" class="show_hide" >Read more</a></p>
</div>
<h4>Accordion selection 3</h4>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="slidingDiv">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p><a href="#" class="show_hide" >Read more</a></p>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
<!-- SHOW HIDE MORE -->
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function(){
$(this).text('Read more');
$(".slidingDiv").slideToggle();
$(this).text('Hide');
$(this).text('Hide');
}, function() {
$(".slidingDiv").slideToggle();
$(this).text('Read more');
});
</script>
<script>
$(function() {
$( "#accordion2" ).accordion({
heightStyle: "content",
});
});
</script>
Thank you to Leeish I added the following:
activate: function( event, ui ) {
$(".slidingDiv").slideToggle();
$('.show_hide').text('Read more');
}