Onclick my 'button' opens all buttons of the same type

Question

So this is what I have right now

The first part of the javascript is just calling in the jQuery lib. Since I don't have acces to the original files I use a custom css, js plugin (mind this all in done in wordpress).

In the fiddle if you click on one the the 'meer' it only opens the one you've clicked. If you press 'minder'it nicely closes the one you've clicked.

Now to the issue, on my testing area if I click one of these buttons the other 5 open as well, which ofcource is not the intended use.

Is there any solution which could fix this? I'mn not able to link to the testing enviroment since it's about a product which isn't released yet, so sadly I do not have permissions to do so.

Possibly the issue:

  $('.wrapper').find('a[href="#"]').on('click', function (e) {

or

$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');

I think the issue is in one of those two. Since I look for the wrapper class which all the 'buttons'have in common.

Any help would be greatly appreciated.

(structure of the element on the test area)

<div class="column withimage ">
  <div class="column-inner">
    <div class="image" style="background-image: url(http://eperium.com.testbyte.nl/wp-content/uploads/2016/08/Icoon_orientatie_v02.png)"></div>
    <div class="txtwrap"><h4><center>ORIËNTATIE</center></h4>
      <div class="wrapper">
        <div class="small">
          <p style="text-align: center;">
            <span style="color: #000000; font-size: 16pt;">title</span><br>
            <span style="color: #000000; font-size: 12pt;">text<br>more text week. </span></p>
        </div>
        <p style="text-align: center;"><a class="btn" href="#">Meer informatie</a></p>
</div>

make sure you are using the wrapper div on each element individually — madalinivascu, Oct 05 '16 at 08:19
This jsfiddle works correctly so you probably don't have the same code on your testing area .... — HaukurHaf, Oct 05 '16 at 08:23
I have used the same javascript on the live area, I have added the html structure of the element from the test enviroment — Robbin van der Jagt, Oct 05 '16 at 08:26
You should replicate your issue in the Fiddle, otherwise it is completely useless — Yuri, Oct 05 '16 at 08:29
Could it be that the closest() method is not reliable? Have you tried with .parent() ? — Focki, Oct 05 '16 at 08:29
@Yuri that's the thing, I can't seem to recreate the issue on a fiddle, which I why I copied the entire js file, and the css / html related to the issue. — Robbin van der Jagt, Oct 05 '16 at 08:35
@Focki Changing closest to parent stops the class from being changed, meaning the additional text won't show — Robbin van der Jagt, Oct 05 '16 at 08:45
well ok. your test area html differs from the html in your fiddle. In fiddle it works as the is a direct child of wrapper. in your testarea your is wrapped in a
. There it would be .parent().parent() ... (maybe closest didnt work because your link was wrapped in a paragraph, but im not sure) — Focki, Oct 05 '16 at 08:49
Are you sure that your ``'s are matched up correctly? Use chrome dev tools to make sure the rendered DOM is correct. — ProEvilz, Oct 05 '16 at 08:55
$(this).parent().parent().find('.small, .big').toggleClass('small big'); works in fiddle at least. Maybe worth another try to navigate to the wrapper with parent instead of closest — Focki, Oct 05 '16 at 08:56
@AshleyBrown I copied the element from my inspector with 'copy outerHTML' — Robbin van der Jagt, Oct 05 '16 at 08:56
@Focki I'm not exactly sure why but it worked! If you would like to put your solution as an anwser I would be more than happy to accept it. — Robbin van der Jagt, Oct 05 '16 at 09:02

score 3 · Answer 1 · answered Oct 05 '16 at 08:21

3

What are you doing inside this function ?

$('.wrapper').find('a[href="#"]').on('click', function (e) {

You need to toogle your class on $(this) element, not to select all element with jquery again.

answered Oct 05 '16 at 08:21

ReaperSoon

765
7
23

This should be a comment, not an answer. – Andy Tschiersch Oct 05 '16 at 08:22
When you check the fiddle you can see what I do inside the function. It basicly changes the text, and toggles the text of the element on click – Robbin van der Jagt Oct 05 '16 at 08:28
*"Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself.**"* - jsfiddle links help, but should not replace content in the question – freedomn-m Oct 05 '16 at 08:50

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

As closest doesn't seem to be reliable (maybe only in your test area) it is worth a try to navigate to the desired element with .parent()

$(this).parent().parent().find('.small, .big').toggleClass('small big');

If anyone is interested in the differences: Difference between jQuery parent(), parents() and closest() functions. According to this, closest should actually work but parent seems to be the saver way.

edited May 23 '17 at 11:48

Community

1
1

answered Oct 05 '16 at 09:13

Focki

150
6

jQuery .closest() is more than reliable. It goes through parents returning the first matched anchestor (https://api.jquery.com/closest/). If it does not work, then it means that selector was wrong. – Yuri Oct 05 '16 at 09:53

score -1 · Answer 3 · answered Oct 05 '16 at 08:50

-1

You can use Jquery's findByClass.

$('.className')

This will find all the elements use className.

answered Oct 05 '16 at 08:50

haiyang

310
3
8

Onclick my 'button' opens all buttons of the same type

3 Answers3