add value to existing class in jQuery

Question

First of all, I have searched quite some hours to find this.. I presume it has an easy fix but I'm really new to jQuery and Javascript, so I'm here for your help.

The problem I'm working with multiple divs and jQuery ToggleSlide(). I want the script to find the right div to open when I click the corresponding div.

For example, when I click the div 'hackandfly', I want it to open the div 'hackandfly-open'.

The code

$(document).ready(function() {
$('.project-open').hide();
$('.hackandfly, .scanergy, .connecting-food').click(function() {
    $slidah = $(this);
    $slidah.slideToggle();
    $('div.project-open').not($slidah).slideUp();
});
});

HTML

<div class="content projects">
        <h3>Projects</h3>
        <div class="project project-big hackandfly">
                <h3>Hack and Fly</h3>
        </div>
        <div class="hackandfly-open project-open" style="display: none;">
            <img src="images/schiphol-logo.png" class="img-project-open"> Proin nec elit ac sapien facilisis ultrices. Integer pellentesque ex a luctus fringilla. Aenean in quam quam. Integer gravida quam eget mauris laoreet hendrerit. Vestibulum feugiat ipsum id.
            <br>
            <br>
            Metus aliquet iaculis. Proin massa justo, maximus in tortor et, Proin massa justo, maximus in tortor et. In aliquam laoreet magna et iaculis. Vestibulum vel orci lobortis, elementum nulla eget, porta eros. Interdum et malesuada fames ac ante ipsum primis in faucibus.
            <br>
            <br>
            Proin massa justo, maximus in tortor et, tincidunt efficitur nibh. Mauris vulputate euismod lorem, vel rutrum ipsum iaculis eu.
        </div>

So what I'm looking for, is that when I push 'hackandfly' div, 'scanergy' div or the 'connecting-food' div, I want it to slideToggle the corresponding div that has -open behind it (I have 3 divs with info called hackandfly-open, scanergy-open, connecting-food-open).

I tried some things like:

$slidah = $(this).after('-open');

And some other stuff but it didn't work. Who can help me?

Cheers!

Do the divs you're clicking on have other classes as well? — James Thorpe
– James Thorpe, Commented Jun 22, 2015 at 12:58

AmmarCSE · Accepted Answer · 2015-06-22 13:07:52Z

2

Use attr() like

$(document).ready(function() {
$('.project-open').hide();
$('.hackandfly, .scanergy, .connecting-food').click(function() {
    $slidah = $($(this).attr('class')+'-open');
    $slidah.slideToggle();
    $('div.project-open').not($slidah).slideUp();
});
});

However, the above will fail if you have multiple classes. A workaround would be to add data-* to the clicked elements like

<div class="hackandfly other-class" data-class-target="hackandfly-open"></div>

and then

$(document).ready(function() {
    $('.project-open').hide();
    $('.hackandfly, .scanergy, .connecting-food').click(function() {
        $slidah = $('.'+$(this).attr('data-class-target'));
        $slidah.slideToggle();
        $('div.project-open').not($slidah).slideUp();
    });
    });

edited Jun 22, 2015 at 13:07

answered Jun 22, 2015 at 12:58

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

juuljuup Over a year ago

Thanks for your reply! But it doesn't work, unfortunately. See link provided

AmmarCSE Over a year ago

@user1291146, can you try my second suggestion(using data-* attributes) ?

juuljuup Over a year ago

You sir, are a boss! Thanks a lot for the quick replies (to everyone), never use this site and the response rate is... FAST! And it works. Thanks!

CodingIntrigue · Accepted Answer · 2015-06-22 13:00:48Z

2

I would generate a unique click handler for each class. That way, you can store all the applicable class names in an array:

// Creates a new unique click function for each class name
function generateClickHandler(className) {
    return function(e) {
        // select the open class here
        $slidah = $('.'+className+'-open');
        $slidah.slideToggle();
        $('div.project-open').not($slidah).slideUp();
    };
}
// Iterate over all the class names and add a new function for each
var clsList = ["hackandfly", "scanergy", "connecting-food"];
$.each(clsList, function(className) {
    $("."+className).click(generateClickHandler(className));
});

answered Jun 22, 2015 at 13:00

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Comments

Ajay Narain Mathur · Accepted Answer · 2015-06-22 13:00:31Z

0

Use:

$('.hackandfly, .scanergy, .connecting-food').click(function() {
    $slidah = $("."+$(this).attr('class')+"-open");
    $slidah.slideToggle();
});

answered Jun 22, 2015 at 13:00

Ajay Narain Mathur

5,5063 gold badges24 silver badges34 bronze badges

2 Comments

juuljuup Over a year ago

Thanks for your reply, but this doesn't seem to work. See the new link provided for visual feedback

blex Over a year ago

That's a start, but it's only going to work if the clicked element has one class.

gaynorvader · Accepted Answer · 2015-06-22 13:21:24Z

0

If you added a wrapper around each section like so:

    <div class="content projects">
        <h3>Projects</h3>
        <div class="project-wrapper">
            <div class="project project-big hackandfly">
                    <h3>Hack and Fly</h3>
            </div>
            <div class="hackandfly-open project-open" style="display: none;">
                {...}
            </div>
        </div>
</div>

you could use parent and find to get the corresponding element as follows:

$('.hackandfly, .scanergy, .connecting-food').click(function() {
    $(this).parent().find('.project-open').eq(0).slideToggle();
}

answered Jun 22, 2015 at 13:21

gaynorvader

2,6573 gold badges21 silver badges36 bronze badges

Collectives™ on Stack Overflow

add value to existing class in jQuery

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related