HTML and CSS only show/hide?

Question

I am making a Story Map (ArcGIS/Esri product that allows you to make various types of georeferenced presentations) that allows you to use embedded HTML and CSS (within <style> tags). The problem I am running into is that I want to have a show/hide for additional information on different topics, but I have been unable to successfully implement this functionality.

I tried the collapse Bootstrap method, which works initially but after a few hours it no longer works (with the button method the button stops working, with the href method it just opens the Story Map again in a new page). Here is the code for that:

<p>
  <button aria-controls="collapseFlowers" aria-expanded="false" 
          class="btn btn-primary" data-target="#collapseFlowers" 
          data-toggle="collapse" 
          type="button">
     More information on Wildflower
  </button>
</p>

<div class="collapse">
  <div class="card card-body">
    <img alt="" src="https://i.imgur.com/Bidb7cR.png" />
  </div>
</div>

From what I've gathered, this issue is because the Story Map lacks the Bootstrap dependencies, but I have no idea why it would work initially if that were the case.

I've also tried all of the solutions here, none of which have worked. When I save and exit the HTML editor, it seems to "compile" the code, removing parts of it that are required for it to function. This is probably an inadequate explanation but I can include examples if needed.

Story Maps do support JavaScript and other, deeper HTML work, but you have to download the source and rehost it, which is not an option for this project. I am experienced in Java, C, and some other languages but know very little about HTML and how it is implemented, so this is driving me crazy. Any help is appreciated!

Why would you need to download the source? JavaScript is built into browsers. — Libra, Jan 07 '20 at 18:37
Just to be clear, you want to show/hide **.collapse** element whenever user clicks on **button** element? — hrithik gautham TG, Jan 07 '20 at 18:38
Does it literally remove them from the file or do they just not show in the browser? @LorenArnold — Libra, Jan 07 '20 at 18:42
Try doing something like this: https://jsfiddle.net/ab08s7k6/ — Iskandar Reza, Jan 07 '20 at 18:54
@Laif yes, it removes it completely from the HTML source text — Loren Arnold, Jan 07 '20 at 21:44
@IskandarRezaRazali thank you, tried that but the link just reopens the Story Map in a new tab. The editor changes the source when I save it to: `
Open
Something in here Close

` — Loren Arnold, Jan 07 '20 at 21:54
@LorenArnold This is the issue you should be concerned about. — Libra, Jan 07 '20 at 21:55

hrithik gautham TG · Answer 1 · 2020-01-07T19:17:41.753

Listen for click events on button,

Using only JavaScript,

const btn = document.querySelector('.btn');
const collapse = document.querySelector('.collapse');
// initially hide the image
collapse.style.display = "none";
var hidden = true;

// click event listener
btn.addEventListener('click', handleClick);

// click event handler
function handleClick (e) {
  if (hidden) {
    hidden = false;
    collapse.style.display = "block";
  }
  else {
    hidden = true;
    collapse.style.display = "none";
  }
}

<p><button aria-controls="collapseFlowers" aria-expanded="false" class="btn btn-primary" data-target="#collapseFlowers" data-toggle="collapse" type="button">More information on Wildflowers</button></p>

<div class="collapse">
<div class="card card-body"><img alt="" src="https://i.imgur.com/Bidb7cR.png" /></div>
</div>

Using only CSS,

label {
  cursor: pointer;
}

div.collapse {
  display: none;
}


#btn-checkbox {
  width: 0;
  height: 0;
  opacity: 0;
}


#btn-checkbox:checked + div.collapse {
  display: block;
}

<button><label for="btn-checkbox">More information on Wildflower</label></button>
<input id="btn-checkbox" type="checkbox"/>
    <div class="collapse">
    <div class="card card-body"><img alt="" src="https://i.imgur.com/Bidb7cR.png" /></div>
    </div>

I've done some changes to the above code, so that it can work comfortably.

Link relevant to this post,
CSS-tricks

Thank you, though this isn't working for me either :/ When I save the HTML source text it changes it to: `

` The button is there, but clicking it does nothing. — Loren Arnold, Jan 07 '20 at 21:47
@LorenArnold try nesting style tag in head tag, and rest of the HTML in body tag. — hrithik gautham TG, Jan 08 '20 at 03:13

HTML and CSS only show/hide?

1 Answers1