The drop-down selection fills div with hidden buttons that then fill in another div with hidden content on the click

advertisements

I am trying to make a somewhat complicated form... and perhaps am making it more complicated than it needs to be!

The title says it all:

  1. Select dropdown option
  2. Based on dropdown selection, the designated div #info is populated with a hidden set of buttons (and changes button set based on which option is selected).
  3. Those buttons can then be clicked to display hidden content in the additional designated div #info2 (which also changes content based on the button clicked).

In my fiddle, I tried to show what I am attempting to do, only I used buttons in place of the dropdown.

I hope this makes sense!

Edit: I want to be able to click/navigate freely between all buttons and dropdowns, in that when a particular choice is clicked, any content related to the previous choice will be removed from the div which will then be populated by the current div choice content.


$(document).ready(function (){
    $('.buttons button').click(function (){
        $('#info').empty();
        $('#info').html($("#" + $(this).data('link')).html());
    });

 });

<body>
        <div class="want-this-to-be-dropdown">
            <ul id="button-column" style="list-style: none;">
                <li class="buttons"><button id="button1" data-link="option1">Button 1</button></li>
                <li class="buttons"><button id="button2" data-link="option2">Button 2</button></li>
                <li class="buttons"><button id="button3" data-link="option3">Button 3</button></li>
            </ul>
        </div>
        <div id="info-div">
            <div id="info">

            </div>
        </div>
<div id="hiddenDivs" style="display:none;">
    <div class="info" id="option1">
      <div class="button-panel">
            <ul id="button-column" style="list-style: none;">
                <li class="buttons"><button id="button1" data-link="option4">Option 4</button></li>
                <li class="buttons"><button id="button2" data-link="option5">Option 5</button></li>
                <li class="buttons"><button id="button3" data-link="option6">Option 6</button></li>
            </ul>
        </div>
        <div id="info-div">
            <div id="info2">

            </div>
        </div>
    </div>
    <div class="info" id="option2">
      <div class="button-panel">
            <ul id="button-column" style="list-style: none;">
                <li class="buttons"><button id="button1" data-link="option7">Option 7</button></li>
                <li class="buttons"><button id="button2" data-link="option8">Option 8</button></li>
                <li class="buttons"><button id="button3" data-link="option9">Option 9</button></li>
            </ul>
        </div>
        <div id="info-div">
            <div id="info2">

            </div>
        </div>
    </div>
    <div class="info" id="option3"><div class="button-panel">
            <ul id="button-column" style="list-style: none;">
                <li class="buttons"><button id="button1" data-link="option10">Option 10</button></li>
                <li class="buttons"><button id="button2" data-link="option11">Option 11</button></li>
                <li class="buttons"><button id="button3" data-link="option12">Option 12</button></li>
            </ul>
        </div>
        <div id="info-div">
            <div id="info2">

            </div>
        </div>
        </div>

        <div class="info" id="option3"><div class="button-panel">
            <ul id="button-column" style="list-style: none;">
                <li class="buttons"><button id="button1" data-link="option10">Fee</button></li>
                <li class="buttons"><button id="button2" data-link="option11">Fi</button></li>
                <li class="buttons"><button id="button3" data-link="option12">Foo</button></li>
            </ul>
        </div>
        <div id="info-div">
            <div id="info2">

            </div>
        </div>
        </div>
</div>
</body>

Here's my fiddle


Okay, so here it goes...

Let's say you have a select field:

function func() {
  var val = document.getElementById("select").value;

  if(val == "bla") {
    document.getElementById("bla").style.visibility = "visible";
  }

  if(val == "blo") {
    document.getElementById("blo").style.visibility = "visible";
  }
}
<select id="select" onchange="func()">
  <option value="" disabled selected style="display:none;">Label 1</option>
  <option value="bla">bla</option>
  <option value="blo">blo</option>
</select>

<div id="bla" style="visibility:hidden; width:30px; height:20px; background-color:#f00"></div>

<div id="blo" style="visibility:hidden; width:30px; height:20px; background-color:#ff0"></div>

Do you get the idea?

I'm sorry, I just saw that you used jQuery........... You would have smth like a class with visibility:hidden and toggle it with jQuery... The equivalent event would be change(). Well, this still should ring a bell. If you need further help (like with jQuery) don't hesitate to ask.

:-)