How to make the value from my form toggle instead of just showing it as soon as the page reloads?-CodePudding

I have a form and I want the value that was input in the form be toggle. I am currently using this code. But instead of just showing what my users put in the form, I want them to be able to toggle the photo that they chose. So when they press the photo, the information they've placed will show and if they click it again, it'll hide. Thank you!

albumgallery.innerHTML  = `<figure><img src='img/albumcover.jpeg' width='150px' alt='chosen PC card'/>
<figcaption>Title: ${title.value}</figcaption>
<figcaption>Artist: ${artist.value}</figcaption>
<figcaption>Genre: ${genre.value}</figcaption>
</figure>`;


If that doesn't make sense, please let me know and I'll explain further.

CodePudding user response：

You can try this solution.

let image = document.querySelector("img");
let flag = true;
function toggle() {
  flag = !flag;
  let elements = document.querySelectorAll("figcaption");
  elements.forEach((elem) => {
    flag ? (elem.style.display = "none") : (elem.style.display = "block");
  });
}
image.addEventListener("click", toggle);

Live demo here: https://codepen.io/dreambold/pen/OJEegvo?editors=1111

CodePudding user response：

Hope this is what you want

$('#imgElephant').click(function ()
  {
    console.log('hello');
   $('figcaption').toggle("slow",function(){ console.log("complete");} );
  },
  function ()
   {
    console.log('goodbye');
    $('figcaption').toggle("slow",function(){ console.log("complete");} );
  });

JSFiddle