CODEWITHSUNDEEP
javascriptjquerycolorbox
linktoahref
linktoahref

Reputation: 7972

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!

Upvotes: 0

Views: 532

Answers (3)

linktoahref
linktoahref

Reputation: 7972

Solved!

I am sorry. I should have paid more attention to the documentation.

// Using a jQuery object:
$(".read_more").on("click", function (e) {
    e.preventDefault();
    var $desc = $(this).next();
    $(this).colorbox({ inline: true, href: $desc });
});

Upvotes: 1

Pugazh
Pugazh

Reputation: 9561

ColorBox also accepts HTML. Try the below

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

Upvotes: 2

rob
rob

Reputation: 2146

If your css class 'hidden' applies display:none; try this

css: 

.not_hidden { display:block }

jquery

$('.read_more').click(function(){ 
      $(this).next('.description').addClass('not_hidden')
})

edited to use classes.

Upvotes: 1

Related Questions