Closing Tab

Published 1 month ago by davy_yg

Hello,

What I need is not exactly a tab but look like it. Check this picture:

http://www.advance-web-studio.com/download2/

See the tab that has an "x" mark on the right corner of it?

How to create a tab like that? The tab should be closable and should comes back to normal if one refresh the screen.

jlrdw
jlrdw
1 month ago (215,690 XP)

A div

ConneX
ConneX
1 month ago (13,225 XP)

Something like the following should help you out:

https://stackoverflow.com/questions/21775680/opening-closing-multiple-divs-with-jquery-slidetoggle

However, you would still need to make the div and style it and add styling to the div to have the closing button of your choice. Which can be an X or what ever.

biishmar

@davy_yg thats a panel with close button. you can create a close button in panel header and when they click just remove the selected panel with remove function in jquery.

$('.close').click(function() {
    $(this).parents('.panel').remove();
});
jlrdw
jlrdw
1 month ago (215,690 XP)

To followup on this, there are many youtube videos on jquery and javascript that does neat things like this. It would be a good idea to actually learn some of this stuff on your own, then if trying something and you get stuck post code you tried and ask.

A lot of the neat stuff is just some basic css also. Css would also be good to learn, actually manually apply some for practice, no library, it will make you more well rounded.

https://www.w3schools.com/Css/

As example, the `neat' pagination links is nothing more than styles applied with css:

https://www.w3schools.com/Css/css3_pagination.asp

Same with those `nav bars', just css, really no secret magic.

Please sign in or create an account to participate in this conversation.