Posted By admin
Tags: , ,
Material Card Reveal with Image Effect

Normally its work and i have use angular JS data’s are passing through the JSON data-rel values are not passing what happen,In multiple cards how could you put the data-rel values on JSON,In mine with bootstrap the card appears as transparent, i think i tried almost everything and the card still is trasnparent .. pleas help me!!!,this code works with bootstrap v3 or is this for the materialize framework?,This works with plain Bootstrap v3 :),when i copy past the code more information “card reveal” is not working…,how do I put multiple cards on the same page without showing the card-reveal for all of them when user clicks on the elipses,Awesome explanation, thanks!,One way, Remove id=’show’ from each button (since you are creating multiple cards it will exist in each card – ids must be unique in html), Add show-btn css class to same button. Add tag data-rel=’1′ to button, to div with “card-reveal” class and button with class “close” in each instance of card. Vary the data-rel number for each card. So, all data-rel’s for a given card have the same number.,Examples<button type=”button” class=”btn btn-custom pull-right show-btn” data-rel=”1″ aria-label=”Left Align”><div class=”card-reveal” data-rel=”1″><button type=”button” class=”close” data-rel=”1″ data-dismiss=”modal” aria-label=”Close”>,Then in javascript, change the #show id reference to be the class so it can handle all instances of the card and change each selector inside the function to use the source event dom element’s data-rel to toggle the correct card., $(‘.show-btn’).on(‘click’, function () { $(‘div.card-reveal[data-rel=’ + $(this).data(‘rel’) + ‘]’).slideToggle(‘slow’); });, $(‘.card-reveal .close’).on(‘click’, function() { $(‘div.card-reveal[data-rel=’ + $(this).data(‘rel’) + ‘]’).slideToggle(‘slow’); });,special thank!,Thank you so much. Brilliant!,The author is brojask

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *