[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 756
  • Last Modified:

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

0
swgdesign
Asked:
swgdesign
1 Solution
 
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now