Tauras
Tauras

Reputation: 3904

Display data in div on click by data attribute which has secondary div with same data attribute

I have 3 divs, each with a different data attribute:

<div class="box">
  <div class="item" data-category="#music"> CLICK </div> 
</div>

<div class="box">
  <div class="item" data-category="#movies"> CLICK </div> 
</div>

.
.
.

I made script which activates a hidden dialog box:

$('.box').click(function() {
    $('#dialogbox').show();
});

I have divs, with ids that are the same as a data-category attribute:

<div id="music"> ALL INFORMATION ABOUT MUSIC </div>
<div id="movies"> ALL INFORMATION ABOUT MOVIES </div>
.
.
.

My question:

How can I display information from all of the ALL INFORMATION divs in dialogbox by the clicked data-category?

Upvotes: 1

Views: 177

Answers (1)

Sagar Devkota
Sagar Devkota

Reputation: 1192

Yes, you can

$('.box').click(function() {
    var id = $(this).find('.item').data('category'); //replace with $(this).find('.item').attr('data-category') if fails

    var message = $(id).html();
    //now write your code here to push this message inside certain div of dialogbox, i assume message is the id
    $("#message").html(message);

    //then finally show
    $('#dialogbox').show();
});

Upvotes: 2

Related Questions