Upon testing this code on my server, I encountered an issue where only the first value in my iterated list would minimize or maximize when clicking on the options. How can I modify it so that all values in the list can be minimized and maximized simultaneously?
<h2 id="Group" style="color:#2E9AFE">Group Name</h2>
<s:iterator
value="#session.test" var="test">
<div>
<p id="GN"><s:property value="%{#test.groupName}"/></p>
</div>
</s:iterator>
<h2 id="Environment" style="color:#2E9AFE">Environment</h2>
<s:iterator
value="#session.test" var="test">
<p id="ENV"><s:property value="%{#test.environment}"/></p>
</s:iterator>
</jsp:attribute>
</h:page>
<script>
$(document).ready(function(){
$("#Group").click(function(){
var $target = $('#GN'),
$toggle = $(this);
$target.slideToggle(500, function () {
$toggle.text(($target.is(':visible') ? 'Group' : 'Group') + ' Name');
});
});
});
</script>
<script>
$(document).ready(function(){
$("#Environment").click(function(){
var $target = $('#ENV'),
$toggle = $(this);
$target.slideToggle(500, function () {
$toggle.text(($target.is(':visible') ? 'Environment' : 'Environment'));
});
});
});
</script>