Help with some simple jQuery

[kaisle]

Hi all – I’m working on this Codepen that I thought would be quick and simple, and I am again stuck on some jQuery.

Basically – it’s a 6 item list, you click on an item to get its information. Then you close the item by clicking the “x”, and go back to the list of items.

I’ve gotten the hover and on-click states to work for each button, but I cannot get the “x” to close the information box and revert back to the original, 6 button layout.

Here’s the link to my Codepen:

http://codepen.io/kaisle/pen/HxEdq

I have left the “.close” function empty, as I assume that’s all that’s left that I need to fill in to get it to work. I’ve tried several things and I can’t get the desired effect. Here’s the code:

$(".close").click(function(){

});

Also, I realized after getting this far that there’s probably an easier way to do this whole thing using the jQuery UI accordion, but I’m not sure… any suggestions about the Pen in general will be a great help!

Thanks,
Kyle

[Paulie_D]

The best way to hand all of this would be to tidy everything up into some simple class change events.

That would eliminate all that CSS changing you are doing in the JS. Unless you have an overriding reason to use JS/JQ to amend the CSS…do it with a class change,

Remember, using JS/JQ to amend CSS is actually adding inline css to your page…not updating an already read CSS file.

Neater and better practice to do it with a class change.

Let me work on it.

[Paulie_D]

OK…I’ve made a couple of changes which simplify matters.

Firstly, I swapped out the sub-menu for a div…much easier to handle and probably (arguably) more semantic.

Secondly, I moved the close button to inside the container rather than have multiple versions in each div. Frankly, this was, I think, because there was some event bubbling (I think I have that right) which prevented stuff from happening higher up when it was clicked.

My JS skill are mediocre at best.

Regardless, it makes the HTML simpler too.

Also, in this case, I was able to simplify the CSS by using the currentColor attribute/property, which allows me to re-use the current text color and apply it to the border.

Which brings me to here

http://codepen.io/Paulie-D/pen/EqirK

The `container’ background is possible (and I haven’t worked on it yet) but would get messy if we trying to grab a class from each button and then twist it to apply a bg color to the container.

I think it could be done much simpler if we use data-attributes but that’s another thing..perhaps for later.

[kaisle]

Hi Paulie D – thank you so much for the help. The way you wrote the jQuery is much simpler and I will definitely learn from it. I need to get used to using the “this” keyword to keep things simple like this. I appreciate all the tips on how to reorganize my HTML and CSS too.

The FadeIn is also a great addition.

Thanks a lot for the quick help, I already like this CSS-Tricks forum!

[kaisle]

I just went through line by line comparing your Codepen to mine, seeing each thing that was improved and fixed. It makes great sense now, thanks again!

[Author]

Posts