53597

Single function to toggle multiple divs inside other divs individually

I have some divs in my page, and each one of them has got a content I want to toggle via jQuery. This is actually how my code looks like:

$('.my_div').click(function() { $( ".my_div_B" ).slideToggle( "slow" ); }); $('.my_div2').click(function() { $( ".my_div_B2" ).slideToggle( "slow" ); }); $('.my_div3').click(function() { $( ".my_div_B3" ).slideToggle( "slow" ); });

and so on... of course it's not the best way to do that, repeating the name of the divs always in the same part of code.

HTML pattern:

<div class="my_div"> <img /> <img /> <div class="my_div_B">text</div> </div>

How can I make it shorter without opening ALL my divs clicking on $('this')? - ps. I know there are some similar questions, but the answers seem to be specific for that markup.

Answer1:

You can check if div has specific class value like:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

//select div with class attribute starts with my_div
$('div[class^="my_div"]').click(function() {
  //find child element div with class start my_div_B
  $(this).children("div[class^='my_div_B']").slideToggle("slow");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_div">
  <img src='http://placehold.it/200x100' />
  <img src='http://placehold.it/200x100' />
  <div class="my_div_B">text</div>
</div>
<div class="my_div2">
  <img src='http://placehold.it/200x100' />
  <img src='http://placehold.it/200x100' />
  <div class="my_div_B2">text</div>
</div>


Recommend

  • Android NotificationListenerService: how to know if user clicked on the notification (opening the re
  • .NET WinForms Custom Control: how to get a reference to the containing form
  • Spotify Tutorial example app is blank
  • How to import data to a specified tablespace
  • Selective regex on a word/character
  • PDF file damaged after upload but local copy is fine. How could this be happening? [closed]
  • Datagridview Change cell color of non empty cell
  • Meteor.js mongodb version
  • Zend Failed opening Zend/Application.php
  • Laravel 5 how to include autoload.php
  • Save and retrieve an image file in LibGDX
  • Access 2007 forms with parameterized RecordSource
  • Do I have to rewrite an html header everytime I want to use it?
  • Opening links in a new tab and only the new tab
  • Grouping by blank nodes
  • XBee Linux Serial Port on Rasberry Pi
  • Update varbinary(MAX) field in SQLServer 2012 Lost Last 4 bits
  • Opening two instances of InAppBrowser (_system and _blank) prevents events from triggering
  • Selectively hide background elements when overlayed with transparent div
  • remove unicode characters but keep all special and English characters with preg_replace
  • Why use database factory in asp.net mvc?
  • Can you perform a UNION without a subquery in SQLAlchemy?
  • What is Eclipse's Declaration View used for?
  • WinForms: two way TextBox problem
  • MySQL WHERE-condition in procedure ignored
  • Web-crawler for facebook in python
  • Jquery - Jquery Wysiwyg return html as a string
  • R: gsub and capture
  • SVN: Merging two branches together
  • How to get icons for entities from eclipse?
  • trying to dynamically update Highchart column chart but series undefined
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • Append folder name and increment by 1 using batch script
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal