Identify element without class & assign that element to a var

JavaScript
1

Not sure if this will work, but my limited js/jq believes it may! I have 4 panels that slide toggle on click. I’m trying to get other panels to auto close if another is opened. To do this on click I’ve added a live class to that element… then I’m searching other panels to see if they dont have a live element and to close all those without live elements

I’m having problems with (this) and assigning elements without class…
hopefully youll see what I mean with the code below…

    $(this).addClass("live");
var el = $(this).attr('id');
console.log('live added to ' + el);

if(!$(s3 || s4).hasClass("live")){
	var el2 = $(this).attr('id');
	console.log(el2 + ' isnt live');
}

Problem obviously lies in the if statement, understanding of (this) , and being able to identify the found if element(s)

help mucho appreciated

2

I’m not really following what you’re doing (especially, what are s2, s3 and s4?), but I guess what you’re going for is

if(!$(s3).hasClass("live") || !$(s4).hasClass("live")){
	var el2 = $(this).attr('id');
	console.log(el2 + ' isnt live');
}

However, you don’t even need a class to add. Assuming all of the panels have class panel, you could just do

$('.panel').on('click', function() {
    $('.panel').not($(this)).stop().slideUp();
    $(this).stop().slideDown();
});

Basically we’re saying that all elements with class panel, except for the one that was clicked, must slide up, and the panel that was clicked must slide down. The stop() are there to avoid any weird animation when you click all panels in rapid succession.

3

s1 - s4 are the ids of the panels… I was just reading about .not / :not over at stackoverflow too!

The second example you gave should do the trick nicely

thanks a lot

4

Nha won’t work in my case cause each panel has a data target that points to the slide up/down element… so html is like

class = "top" data-target="s4-bottom" /// top panel - click occurs here
id ="s4-bottom" class="bottom" /// bottom slide down panel

with js

var targetBottom = $(this).data("target");

and targetBottom is passed to a slide toggle event

Maybe if I removed data and had something like
.next( .bottom )?

5

Try this

$('.panel').on('click', function() {
    if ($('.panel.active').length > 0){
        $('#'+$('.panel.active').data('target')).slideUp();
        $('.panel.active').removeClass('active');
    }
    $('#'+$(this).data('target')).slideDown();
    $(this).addClass('active');
});
6

sweet…good stuff! had to remove ‘#’+$
so now its looking like

$('.top').on('click', function() {
    var target = $(this).data("target");

    if ($('.top.active').length > 0){
        $($('.top.active').data('target')).slideUp();
        $('.top.active').removeClass('active');
    }
    $($(this).data('target')).slideDown();
    $(this).addClass('active');
});

So I can try and learn something from this…

if class .active . row … length > 0 … length in this statement checks if .active is applied?
(‘.panel.active’).data(‘target’)).slideUp … that and next line I get
dont know why it needs 2 jq symbols oh …$($(…wouldnt work if I changed it to
$(‘.panel.active’).data(‘target’)).slideUp();

and after if, no need to put below in an else statement?

$($(this).data('target')).slideDown();
$(this).addClass('active');

thanks again

7

length shows how many elements found by this selector

because .data() returns string (not DOM element)
and you are using this string as a selector to find element

let me explain this string:

$($('.top.active').data('target')).slideUp();

what it actually does:

      $('.top.active').data('target')     // this gives a value (string) in data attribute
                     |   
                     |           // and you put this value (string)...
                     | 
               $(         ).slideUp();     // ...here to get actual DOM element

you can also write it in different way:

var targetId = $('.top.active').data('target');
$(targetId).slideUp();
8

no, algoritm is:

if (any already activated panel) { hide it; }
show current panel;
9

I’m kind of with it and 99% there. Thanks for explanation…Can hopefully apply this further down the line.

Got 1 more thing I need to get sorted on this. And it hurts to seek advice again…tried a few different ways, but no joy. I simply need to stop second function calls on the container if its already active…

Tried along the lines of…

 if ($('.top.active').length > 0 && !$(".top").hasClass("live")){}

but there’s no chance for it to fire the first call
need something along the lines of

if ($('.top.active').length > 0 /// and is not equal to / does not equal (this) 

($('.top.active').length > 0 && ('.top').not(this)){

above allows one panel to open once

if ($('.top.active').length > 0 && ('.top').not===(this)){

stops event first fire …arghghg!

I’ve upped what I have so far… Just need to stop the same top container going to the event if its already open… or even along the lines of if already open and clicked again - return 0.

http://175310703.linuxzone38.grserver.gr/test2/step4/s4-v2.html

If someone could provide even pseudo, that’d be great

Thanks thanks

10

haha done it! Sorry if youve read the above and had a think…I can’t edit the above now.

Tried a few diff ways and sat on comp I was struggling to get my head around it… led down, had a smoke and quick think…then boom! Had an Eureka moment… but thinking back on it, dunno why it was difficult to get straight away =/

11

Hi,

This may be a bit simplistic but if you don’t want to do anything if the element is active then why not check for the active class and exit straight away.

e.g.

$('.top').on('click', function() {
	if ($(this).hasClass('active')) {return}

etc…

I’m sure megazoid will have a more elegant solution :smile:

12

Completely agree. Use solution by @PaulOB

13

Dunno what I was thinking or failing to think earlier… what should be obvious, err isnt/wasnt!
got it in a similar way with

if ($(this).hasClass("live")){
	return(0);
}
else{

but added live class alongside active
will change to just active :relaxed:

14

You don’t need else here, because you have return inside the if.
Execution will not go after if anyway.

Also, instead of return(0); use simple return;. It’s not a big deal, but a good practice (your click handler doesn’t need to return any values).

15

All sorted

Thanks Thanks

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.