Search code examples
javascriptjquerycolorbox

ColorBox - How to display div using class

My HTML structure is as follows:

<div class="parent">
    <span class="read_more">Read More</span>
    <div class="hidden description" id="description1">Description</div>
</div>
..
<div class="parent">
    <span class="read_more">Read More</span>
    <div class="hidden description" id="description2">Description</div>
</div>

My Js code which works for id if I give the id to each description div's

$(".read_more").on("click", function (e) {
    var href = '#'+$(this).next().attr('id');
    $(this).colorbox({ inline: true, href: href });
});

I am using ColorBox plugin.

When I click on Read More I need the Description to pop up. I am able to achieve this using id and I don't want to give id's to the description as this is dynamically generated. How could I achieve this using class? Is this possible?

Any help appreciated!

Solution

  • ColorBox also accepts HTML. Try the below

    $(".read_more").on("click", function (e) {
    var html = '#'+$(this).next().html();
    $(this).colorbox({ inline: true, html: html });
});