jquery find strong element and .addclass

I wondered if someone could help me with some jquery code and using the next functionality to set a class on an element.

I have an accordion system like so:

<div id="AboutAccordion">
    	<div class="accordionButton"><h3>Disclaimer</h3><strong></strong><div class="floatfix"></div></div>
		<div class="accordionContent pad10"></div>
<div class="accordionButton"><h3>Disclaimer 2</h3><strong></strong><div class="floatfix"></div></div>
		<div class="accordionContent pad10"></div>
<div class="accordionButton"><h3>Disclaimer 3</h3><strong></strong><div class="floatfix"></div></div>
		<div class="accordionContent pad10"></div>
</div>

Open in new window


The <strong> tag is used for an icon(downward arrow). What I would like to do is when the user clicks a div with the class 'accordionButton', add a class (.on) to the <strong> element
that is within the click div, but ONLy to the div that is clicked not all divs!

$("#AboutPage").live("pageinit",function() {
			//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
			$('.accordionButton').click(function() {
				//$('.accordionButton').removeClass('on');
				$('.accordionContent').hide();
				//$('.accordionContent').slideDown('normal');
				if($(this).next().is(':hidden') == true) {
					//$(this).addClass('on');
					//$(this).next().slideDown('normal');
					$(this).next().show();
				 }
			});	
			$('.accordionContent').hide();
		});

Open in new window

swgdesignAsked:
Who is Participating?
 
MyFlowerCommented:
Is this what you want?
$( document ).ready( function( ) {
	$( "#AboutAccordion .accordionButton" ).each( function( ) {
		$( this ).click( function( ) {
			$( this ).find( "strong" ).addClass( "on" );
		} );
	});
});

Open in new window

0
 
WebDevEMCommented:
Hi,

I've made a jsFiddle at http://jsfiddle.net/webdevem/UnwNP/ that  adds the "on" class to the <strong> within the chosen accordionButton only.  The jQuery you posted has other things going on, so I've simplified mine to just the piece we need for this.

Here's the code, so that it's stored in ExpertsExchange after the jsFiddle is deleted:
<div id="AboutAccordion">
        <div class="accordionButton"><h3>Disclaimer</h3><strong>Arrow</strong><div class="floatfix"></div></div>
        <div class="accordionContent pad10"></div>
<div class="accordionButton"><h3>Disclaimer 2</h3><strong>Arrow</strong><div class="floatfix"></div></div>
        <div class="accordionContent pad10"></div>
<div class="accordionButton"><h3>Disclaimer 3</h3><strong>Arrow</strong><div class="floatfix"></div></div>
        <div class="accordionContent pad10"></div>
</div>

Open in new window

            //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
            $('.accordionButton').click(function() {
               $(this).children('strong').addClass('on');
            });

Open in new window

.on {background-color: #c00;}

Open in new window

0
 
Julian HansenCommented:
$('.accordiaonButton').click(function() {
  ...
  $(this).find('strong').addClass('on');
});

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.