The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Tracking Opened Elements in Accordion
Thornak
post Aug 13 2018, 12:20 AM
Post #1





Group: Members
Posts: 1
Joined: 12-August 18
Member No.: 26,692



Slightly new developer here. Working with an escape room that uses an html page to provide hints to customers. The following code is an abbreviated form of what we have now. The hints are contained in an accordion, and at the very top of the page, it says "HINTS USED:" followed by the number of clicks on the accordion that have been made since the page was loaded. I would like to make it so that number displays the total number of elements in the accordion that have been opened, not counting double hints that have been closed or opened twice (eg. Say someone opens Hint 3, then closes it, then opens it again. This code would display 3 for hints used, but I want it to just say 1 because only one of the hints has been seen). I figure there is some way to assign a boolean type value to each accordion element to say if it has been opened before or not, but I don't know how to do that. I put a comment in front of the part of the code that actually increases the hint count. Thanks in advance for the help.


<html>
<head>
<meta charset="utf-8">
<title>Hints</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

<div style="text-align:center"><h3>HINTS USED: <span id="clues">0</span></h3></div>

<div id="accordion">
<h3>Hint 1</h3>
<div>
<p>Insert Hint 1 here</p>
</div>

<h3>Hint 2</h3>
<div>
<p>Insert Hint 2 here</p>
</div>

<h3>Hint 3</h3>
<div>
<p>Insert Hint 3 here</p>
</div>
</div>

<div style="text-align:center; margin-top: 10%;"><button id="reload" type="button" class="btn btn-success btn-lg">Reset</button></div>

<script>

$( "#accordion" ).accordion({
collapsible: true,
autoHeight: true,
active: false
});

<!--The following lines keep track of number of clicks on the accordion, but I only want it to increase "count" when an element of the accordion is opened for the first time-->
var count = 0;
$('#accordion > h3').click(function(e){
++count;
$("#clues").text(count);
console.log(count);
});

$('#reload').click(function(){
location.reload();
})

</script>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:13 PM