0

I am using Field collection module and added some repeated fields. Each field has one button, on clicking the button, the text area is expands(toggling kind of). But the java code is working for only first field not for rest of the fields. I have added java script code through .info method. Thanks.

(function ($) {
     Drupal.behaviors.myfunction = {
         attach: function(context, settings) {
            $( "#button1" ).click(function() {
              $( "#p1" ).toggle("slow");
            }); 

 }}})(jQuery);
8
  • are you using .each() method?
    – Shabir A.
    Oct 27, 2015 at 20:08
  • i have added the following code by making the .js file in the field collection module folder, it is working fine, but only for the first field, but not for the rest of the fields ...............................(function ($) { Drupal.behaviors.myfunction = { attach: function(context, settings) { $( "#button" ).click(function() { $( "#p" ).toggle("slow"); }); }}})(jQuery);
    – CodeNext
    Oct 27, 2015 at 20:13
  • can you paste the code you are using? Oct 27, 2015 at 20:16
  • Just have added JS code in the main question..Thx
    – CodeNext
    Oct 27, 2015 at 20:18
  • one way is to use class for each button and then call $('.class').each( // and then your code goes.. )
    – Shabir A.
    Oct 27, 2015 at 20:20

1 Answer 1

1

Hmmm, this is a kind of tricky one! Because you want the element corresponding to the button you clicked to be the only one that toggles, correct? Not all of the elements?

I think you want something like this for your code, where everything between [] is replaced with the relevant selector. So [BUTTON CLASS] would become the class that you apply to all the buttons, such as "button", not the ID that only gets applied to a single button ("button1", "button2", and so on). Likewise, [CHILD CLASS] would be replaced with a class that you apply to all elements that you have IDs such as "p1", "p2", etc on.

(function ($) {
  Drupal.behaviors.myfunction = {
    attach: function(context, settings) {
      $( ".[BUTTON CLASS]" ).each(function (index) {
        $(this).click(function() {
          $(this).parent().children(".[CHILD CLASS]").toggle("slow");
        });
      });
    }
  }
})(jQuery);

Hope that helps!

Edit Updates made to the code to get the button parent and then the #p1 from there. It assumes that the #p1 and the #button1 are both children of the same element.

Edit 2 Given the structure

<div class="buttoncontainer">
  <ul class="buttonlist">
    <li><button class="button1">Toggle</button></li>
    <li><a href="#"><button class="button2">Link</button></a></li>
  </ul>
  <p class="p1" style="display:none">Text to be written here</p>
</div>
<hr>
<div class="buttoncontainer">
  <ul class="buttonlist">
    <li><button class="button1">Toggle</button></li>
    <li><a href="#"><button class="button2">Link</button></a></li>
  </ul>
  <p class="p1" style="display:none">Text to be written here</p>
</div>
<hr>
<div class="buttoncontainer">
  <ul class="buttonlist">
    <li><button class="button1">Toggle</button></li>
    <li><a href="#"><button class="button2">Link</button></a></li>
  </ul>
  <p class="p1" style="display:none">Text to be written here</p>
</div>

The following JS does what you want, I believe:

$( ".button1" ).each(function (index) {
  $(this).click(function() {
    $(this).parents('.buttoncontainer').children(".p1").toggle("slow");
  });
});
8
  • First of thanks for the answers, I tried with several ways but unable to get it done. for better explanation I have created link in JSFIDDLE. For the representation i have three section separated with <hr>. What I want is if I click the first toggle button it has to open its own content. not others. The same concept I am applying for the series of fields which i have created using field collection module, So each field has this toggle button. Note:-I have more than 100 such repeated fields in one content type, so that much buttons. Link-- jsfiddle.net/ccodenext/ves02oaj
    – CodeNext
    Oct 28, 2015 at 8:51
  • 1
    Are you able to change the HTML output? If so, I can make some suggestions that will make this easier; namely, adding a class to the div and moving the <p> tag into the div. If you can change the HTML output, something like this would work: jsfiddle.net/oxw1zsn4 Oct 28, 2015 at 13:45
  • Hi, your code is working PERFECTLY fine. Thanks. But i found one issue, may be not related to this code, while i added the HTML part in the each field and provided js part in JS folder and css part in CSS folder (which I attached using .info method of adding css and js in field collection module) the js and css part seems not have any effect on content, looks like it is not attached. So, i used Code per Node module for that node and applied your js and css there, IT IS WORKING fine. But i do not know why js and css is not attaching by .info method, which same thing working with CPN. Thx
    – CodeNext
    Oct 28, 2015 at 16:34
  • You are right, it is affecting the HTML output, because js and css file may be not recognizing the class of html elements. This thing works when I use Code per Node module and add CSS and JS code there. But problem arises when I make Views of that content type, any suggestion? Very Thanks.
    – CodeNext
    Oct 28, 2015 at 19:20
  • Hmmm, and you have the code surrounded in (function ($) {Drupal.behaviors.myfunction = {attach: function(context, settings) {}}}? Oct 28, 2015 at 19:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.