Question 44743 in Html Question posted in
Some basic documentation can be found here.

How do I make a collapsible menu appear after clicking on an image? – Html

I want to have an image such as this and when I click it, I want to show an HTML element such as

        <input type="radio"></input>
        <input type="radio"></input>

I want to be able to toggle the element to show and hide by pressing the image. How can I do this?

Tags:

3

Answers


  1. 0

    Below snippet can give you an idea of what you can do.

    function toggleClass() {
  document.querySelector('.identifier').classList.toggle('hide');
}
    .hide {
  display: none;
}

.image {
  height: 20px;
  width: 20px;
}
    <img onClick="toggleClass()" class="image" src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/cog-settings-512.png">

<div class="identifier">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</div>
    Login or Signup to reply.
  2. 0

    You can solve that with create onclick event on that image element. Try this :

    let visible = true; // true => default visible, false => default not visible
let target = document.getElementById("target");
let toggle = document.getElementById("toggle");
if(!visible) target.style.display = 'none';
 
toggle.onclick = function() {
  if(visible) {
    visible = false;
  } else {
    visible = true;
  }
  target.style.display = visible ? '' : 'none';
}
    #toggle:active {
    position: relative;
    top: 1px;
}
    <div>
  <img id="toggle" src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/cog-settings-512.png" width="50"/>
</div>
<div id="target">
  <input type="radio">
  <label>Radio 1</label>
  <input type="radio">
  <label>Radio 2</label>
</div>
    Login or Signup to reply.
  3. 0

    Create an eventListener on the image and pass in the event to use for reference in the DOM, then you can create and add any HTML using innerHTML.

    const image = document.querySelector('#cog');

function showElement(e) {
  const el = "Enter something: <input class='myinput' value='some value' type='text'><button class='button' onclick='showEntry(event)'>Submit</button>";
  const parent = e.target.closest('#parent');
  const target = parent.querySelector('.target');
  target.innerHTML = el
}

image.addEventListener('click', showElement);

function showEntry(event){
  const parent = event.target.closest('#parent');
  const target = parent.querySelector('.myinput');
  console.log(`${target.value} has passed through the onlick method added to the constant called el from the showEntry method.`)
}
    #cog {
  height: 100px;
  width: 100px;
}
    <div id="parent">
  <img src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/cog-settings-512.png" id="cog">
  <div class="target"></div>
</div>

    Or you could toggle a class that hides the element you wish to show by default, then toggle it using el.classList.toggle().

    const image = document.querySelector('#cog');

function showElement(e) {
  e.target.closest('#parent').querySelector('.target').classList.toggle('hidden');
}

image.addEventListener('click', showElement);
    #cog {
  width: 100px;
  height: 100px;
}

.hidden {
  display: none;
}
    <div id="parent">
  <img src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/cog-settings-512.png" id="cog">
  <div class="target hidden">Here is some info I want to be toggled when I press the image.</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search