Javascript toggle using custom attributes

Question

Can't seem to get this to work for me, can anyone offer me some help?

This should open and close a section of text based on click, it takes the ID # which is just a digit (1,2,3,4,etc) and using that id targets an id to open and close the section.

Javascript

$(document).ready(function(){

    $('.classclick').click(function(){
   $('#class'+$(this).Attr('data-id')+"show").show(400); 
   });
});

HTML

<div class="classes">
    <?php foreach ($classes as $class): ?>
        <div class="class">
            <div class="classclick" data-id="<?=$class['cid']?>">
                <div class="class-title">
                    <?=$class['className']?>
                </div>
                <div class="class-intensity">
                    Intensity: <?=$class['classIntensity']?>
                </div>
            </div>
            <div class="class-show hidden" id="class<?=$class['cid']?>show">
                <div class="class-inner-content">
                    <div class="two-thirds">
                        <?=$class['classDesc']?>    </div>
                    <div class="one-third">
                        Things To Know:
                        asdfasd
                        asdf
                        afsdadfs

                        fsda
                        dfsa
                        dfsadfsa
                    </div>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
</div>

.attr not .Attr, note you could also use the .data method since you are using a data-* attribute, your actual code at codepen doesnt work because you havent included jquery — Patrick Evans
– Patrick Evans, Commented Aug 18, 2014 at 21:40
switching it to .attr('data-id') does not work, neither does .data('id') or .data('data-id') — Jacob
– Jacob, Commented Aug 18, 2014 at 21:45
because as i said you didnt include jquery: codepen.io/anon/pen/kLitu — Patrick Evans
– Patrick Evans, Commented Aug 18, 2014 at 21:45

Omer Bonfil · Accepted Answer · 2014-08-18 21:51:19Z

1

as Patrick suggested, You might have missed the jQuery inclusion in CodePen, but i would suggest using $.each when using a class selector. Updated CodePen

$('.classclick').each(function(){
  $(this).click(function(){
   $('#class'+$(this).data('id')+"show").toggle(400); 
  });
});

answered Aug 18, 2014 at 21:51

Omer Bonfil

4173 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian Dillingham · Accepted Answer · 2014-08-18 22:16:28Z

1

Demo - The .hidden element is next in the dom, try using next() to select .hidden and toggling it.

$('.classclick').click(function(){
   $(this).next(".hidden").toggle(400);
});

This avoids string concatenation, each loops & extra selectors while making it more readable for you.

edited Aug 18, 2014 at 22:16

answered Aug 18, 2014 at 21:50

Brian Dillingham

9,3763 gold badges30 silver badges47 bronze badges

Collectives™ on Stack Overflow

Javascript toggle using custom attributes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related