Add and remove extra class on click

JavaScript
21

Fantastic! :smile:
Works great, thanks Pullo and thanks for getting back, really helped.
Updated fiddle just for reference http://jsfiddle.net/whskrhL6/9/

And still learning this new system… it’s starting to grow on me :smile:

Update: Everything works though I have links on images, other text, something is causing them not to fire. Previously they fired the carousel, that is fixed with the update but now they do nothing?

An instance of code I’m using looks like:

$(‘.list-group li’).on(‘click’, function (event) {
var $panel = $(this),
$accordion = $panel.parent(),
$panelContents = $panel.find(“ul”),
$activePanelContents = $accordion.find($(“.active > ul”));

Images and other text links separate from the carousel are listed inside the .list-group li.

Just realise what is causing the problem:

event.stopPropagation();
event.preventDefault();

How do I stop the above canceling other links not part of the carousel but inside .list-group li wrapper?

Barry

23

Could you post an example of this not working for you (jsfiddle or something, or a link)

24

This should outline what I mean.
Any links now inside < li > excluding the Accordion don’t work because of:

event.stopPropagation();
event.preventDefault();

If I remove the above, the links work, but the Accordion stops working.

http://jsfiddle.net/whskrhL6/10/

Thanks Pullo

25

Ah ok. You are looking for a way to include links to other parts of your site.
You can do it like this:

$('.nav li').on('click', function (event) {
    var $panel = $(this),
        $accordion = $panel.parent(),
        $panelContents = $panel.find("ul"),
        $activePanelContents = $accordion.find($(".active > ul")),
        accordionLink;
    
    if($panel.hasClass("active")){
        $panelContents.slideUp();
    } else {
        $activePanelContents.slideUp();        
        $panelContents.slideDown();
    }
    
    accordionLink = ($(event.target).attr("href").match(/^#\w+$/))? true : false;
    if(accordionLink){
        event.stopPropagation();
        event.preventDefault();
    }
});

This will check if the href attribute of whatever is clicked matches a hash (#) plus one or more letters or digits.
If so, it concludes we are dealing with an accordion link and prevents the links default action.

26

Great! Getting there Pullo :smile:

Ok, just a couple of small issues I’ve found after a bit of testing:

A lot of my markup is structured as below, the first < li > works good as the trigger, though the nested < li > inside the < ul > also fires the Accordion, and closes the tab.

<li>
 <h3>Title</h3>
 <ul>
  <li>Some content <a href="">link</a> here.</li>
 </ul>
</li>

I also need to add:

$('.list-group li ul li a').on('click', function (event) {
      event.stopPropagation();
      //event.preventDefault();
  });

This is so the nested < a > gets followed and works as our first problem.
Is there a way to combine these?

I think the main problem now is the nested < li >.

Thanks, Barry

27

Hi,

Could you post the complete HTML for your accordion?
It’s better if I properly understand what you are trying to do, before offering a solution.

28

Most of the html is the same Pullo, the main issue is, I can click inside the other nested li and close the accordion. As updated in fiddle.

I’ve added a line under the h3, this should be the only clickable area, though if you click in the space near the top or bottom in the nested li, this also triggers the close.

Hope this makes sense, I’ll start a new thread for any future stuff this works very well now and just ironing out small issues, don’t want to take up any more of your time.

For some reason I can’t add a link
If you open the previous fiddle above and change 10 to 11, that is the latest.

Thanks, Barry

29

Nope. You are still clicking inside the <li>, you were just hitting its padding.
One way to avoid this is to style the <li> so that it doesn’t have any additional padding (add the padding to the <h3> instead.

Another way would be to attach the event handler to the <h3> itself:

$('.nav h3').on('click', function (event) {
    var $panel = $(this).parent(),
        $accordion = $panel.parent(),
        $panelContents = $panel.find("ul"),
        $activePanelContents = $accordion.find($(".active > ul"));
    
    if($panel.hasClass("active")){
        $panelContents.slideUp();
    } else {
        $activePanelContents.slideUp();        
        $panelContents.slideDown();
    }
    
    event.stopPropagation();
    event.preventDefault();
});

HTH

30

I did think this might be the case, ok, I understand what needs to be done now if I want to fine tune this in other ways. Been a busy thread, and again appreciate your time and patience Pullo with this one.

Working great :smile:

Thanks again, Barry