Fix details toggling
This commit is contained in:
parent
838dda07c4
commit
08beeced35
1 changed files with 16 additions and 6 deletions
|
@ -12,10 +12,10 @@
|
|||
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
|
||||
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
|
||||
crossorigin=""></script>
|
||||
<link rel="stylesheet" href="{{ url('/css/app.css') }}" />
|
||||
<link rel="stylesheet" href="/css/app.css" />
|
||||
</head>
|
||||
|
||||
<body class="antialiased">
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Where in the World is Ben?</h1>
|
||||
|
@ -32,8 +32,8 @@
|
|||
<section id="checkinList">
|
||||
<ol>
|
||||
@foreach($trip->checkins as $checkin)
|
||||
<li id="{{ $checkin->id }}" onClick="openCheckin(this.id)">
|
||||
<details>
|
||||
<li>
|
||||
<details id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
|
||||
<summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ $checkin->date }}</span></summary>
|
||||
{{ $checkin->note ?? "[No note]" }}
|
||||
</details>
|
||||
|
@ -71,8 +71,18 @@
|
|||
checkinMarkers[{{ $checkin->id }}] = marker;
|
||||
@endforeach
|
||||
|
||||
function openCheckin(checkinId) {
|
||||
checkinMarkers[checkinId].openPopup();
|
||||
function toggleCheckin(isOpen, checkinId) {
|
||||
if (isOpen) {
|
||||
var checkins = document.querySelectorAll('details');
|
||||
|
||||
checkinMarkers[checkinId].openPopup();
|
||||
|
||||
checkins.forEach(checkin => {
|
||||
if (checkin.id != checkinId && checkin.open) checkin.open = false;
|
||||
});
|
||||
} else {
|
||||
checkinMarkers[checkinId].closePopup();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</footer>
|
||||
|
|
Loading…
Reference in a new issue