Javascript - populate a div with content from a hidden div using click buttons

Question

I need some help. As you will see in my fiddle, I am attempting to use buttons to populate a single container div with content from multiple hidden divs, depending on which button is clicked. The problem I am having is, I don't know how to access the actual content in the hidden divs to populate the container div. As of now, I am using the id attributes for the hidden divs to demonstrate which div content I would like to display in the container.

I've seen a few other posts with link <a> attributes referencing hidden content, but none so far using a button element with click functionality to change div content.

    jQuery(function ($) {
      $('#button1').click(function () {
        $('#info').empty();
        $('#info').prepend('#option1');
      });

      $('#button2').click(function () {
        $('#info').empty();
        $('#info').prepend('#option2');
      });
      
      $('#button3').click(function () {
        $('#info').empty();
        $('#info').prepend('#option3');
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-panel">
  <ul id="button-column" style="list-style: none;">
   <li class="buttons"><button id="button1">Button 1</button></li>
   <li class="buttons"><button id="button2">Button 2</button></li>
   <li class="buttons"><button id="button3">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">Box</div>
  <div class="info" id="option2">Google Drive</div>
  <div class="info" id="option3">Box</div>
 </div>

Here is my fiddle

score 4 · Accepted Answer · answered Nov 03 '16 at 22:18

4

Here's a version that uses jquery data attributes. It reduces the redundancy and complexity and can be configured easily.

<body>
        <div class="button-panel">
            <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">Box</div>
    <div class="info" id="option2">Google Drive</div>
    <div class="info" id="option3">Box</div>
</div>
</body>
<script>
   $('.buttons button').click(function (){
        $('#info').empty();
        $('#info').html($("#" + $(this).data('link')).html());
    });   
</script>

Example : https://jsfiddle.net/yvsu6qfw/3/

answered Nov 03 '16 at 22:18

DinoMyte

8,737
1
19
26

Thank you SO much! This works exactly the way I need it to. You rock!! – lane Nov 04 '16 at 19:41
Glad to help :) – DinoMyte Nov 04 '16 at 20:59
Dino, can you please help me understand the use of ("#" + $(this).data('link') ? – lane Nov 05 '16 at 01:10
@icunning, $(this).data('link') extracts the data-attr 'link' of button element, which gives you either option1, option2, option3 etc. '#' is used as an id identifier, so after the whole expression, you get ('#option1") – DinoMyte Nov 07 '16 at 18:14
Thanks for your explanation, and your answer! Helped me get a prototype finished. :) – lane Nov 19 '16 at 01:51

score 1 · Answer 2 · answered Nov 03 '16 at 22:20

It sounds like maybe you were looking for using the button itself to populate data built into the button with a data attribute or something? If so you can do something like this:

HTML

<div class="button-panel">
    <ul id="button-column" style="list-style: none;">
        <li class="buttons"><button data-info="Box">Button 1</button></li>
        <li class="buttons"><button data-info="Google Drive">Button 2</button></li>
        <li class="buttons"><button data-info="Box">Button 3</button></li>
    </ul>
</div>

<div id="info-div">
    <div id="info"></div>
</div>

jQuery

$(document).ready(function (){
    $('#button-column button').click(function (){
        $('#info').html($(this).attr('data-info'));
    });
 });

I appreciate your answer! I've chosen another that suits my purpose. — lane, Nov 04 '16 at 19:42

score 1 · Answer 3 · answered Nov 03 '16 at 22:59

If you want the first button to load the content from the first hidden div etc. without relying upon using the id attributes, you can use the .index() method. When you pass this as an argument it will return the index value of the click event target in the collection $("#button-column .buttons :button"). Afterwards you can pass the index value to the .get() method to retrieve the corresponding element from the collection of hidden divs $("#hiddenDivs .info").

$().ready(function(){
  $("#button-column .buttons :button").on("click", function(){
    $('#info').empty();
    var clickedIndex = $("#button-column .buttons :button").index(this);
    var hiddenInfo = $("#hiddenDivs .info").get(clickedIndex);
    $('#info').prepend( $(hiddenInfo).text() );
  });
});

I appreciate your answer! I've chosen another that suits my purpose. — lane, Nov 04 '16 at 19:42

score 0 · Answer 4 · answered Nov 03 '16 at 22:08

you can use html function, without parameter gets the content of the element with parameter replaces the content with the string parameter

$(document).ready(function (){
    $('#button1').click(function (){
        $('#info').html( $('#option1').html()  );
    });
    $('#button2').click(function (){
                $('#info').html( $('#option2').html()  );
    });
    $('#button3').click(function (){
            $('#info').html( $('#option3').html() );
    });
 });

I appreciate your answer! I've chosen another that suits my purpose. — lane, Nov 04 '16 at 19:43

meavo · Answer 5 · 2016-11-03T22:20:53.543

In your code example, you do for example:

$('#info').prepend('#option1');

What you instruct to do here, is adding a text string '#option1' to an element with ID info.

What you intend to do is prepending the content of ID option1 to the element with ID info. You could do something like this instead:

$('#info').prepend($('#option1').html());

Another approach could be (but I don't know if that's relevant for you) to not clone content (since it costs you repaints) but toggle the specific elements instead. For example:

$('#option1,#option2').hide();
$('#option3').hide();

And yet another one: use data-attributes on your buttons:

<a href="#" data-text="Box" class="button">Button 1</a>
<a href="#" data-text="Another text" class="button">Button 2</a>
<div id="info">

</div>

And the JS:

$('.button').on('click', function(event) {
    event.preventDefault();
    $('#info').html($(event.currentTarget).attr('data-text'));
});

I appreciate your answer! I've chosen another that suits my purpose. — lane, Nov 04 '16 at 19:42

Roko C. Buljan · Answer 6 · 2016-11-03T22:21:42.420

Don't repeat yourself! To get the number out of an ID replace with "" all that is not a number using RegExp \D.

Using number from ID

Than, to get the actual content you can use $("#option"+ num).html() or $("#option"+ num).text() methods:

jsFiddle demo

jQuery(function ($) {

  $('.buttons button').click(function () {
      var num = this.id.replace(/\D/g,"");
      $("#info").html( $("#option"+ num).html() );
  });

});

Target element using `data-*` attribute

Alternatively you can store inside a data-* attribute the desired target selector ID:

<button data-content="#option1" id="button1">Button 1</button>

and than simply:

jsFiddle demo

jQuery(function ($) {

  $("[data-content]").click(function () {
      $("#info").html( $(this.dataset.content).html() );
  });

});

http://api.jquery.com/html/
http://api.jquery.com/text/

I appreciate your answer! I've chosen another that suits my purpose. — lane, Nov 04 '16 at 19:42

score 0 · Answer 7 · answered Nov 03 '16 at 22:27

If the expectation is to get same indexed hidden div content, Then the below code should work.

$(document).ready(function (){
        $('.buttons button').click(function (){
            $('#info').empty();

            var index = $('.buttons button').index($(this));
            $('#info').html($('.info:eq('+index+')').html());
        });
    });

Javascript - populate a div with content from a hidden div using click buttons

7 Answers7

Using number from ID

Target element using data-* attribute

Target element using `data-*` attribute