Css expand collapse div

The jQuery Expand Collapse Panels are used for breaking content rich pages into separate sections. So they allow visitors to navigate easily to a particular section based on his choice.

There is an arrow, which on clicking, reveals the content of the section. Developers always have the need to include these Expand Collapse Panels in their websites, and therefore they will find this tutorial useful.

css expand collapse div

I will create 3 expandable panels for 3 states of United States of America. When a user clicks the arrow, which is given in front of them, the corresponding state panel will expand and reveals the cities of the state.

Inside the main divI have created 3 Expand-Collapsible divs. I have given them the class called expandableCollapsibleDiv. The name of the state is placed in the h3 tag while an arrow which is an image is shown just in front of it. When the arrow is clicked then it will open or close the city panels. I have made the city panels which acts as Expand Collapse panels in a ul tag.

I have used the jQuery Selector to select the up-arrow and down-arrows like:. The jQuery code makes this Expand Collapse Panels to working mode. Here I have created a click event of the img tag.

css expand collapse div

In the click event, the code checks if the ul element of the expandableCollapsibleDiv is Expanded i. In the same way if the ul element of the expandableCollapsibleDiv is Collapsed i. In this way you can create jQuery Expand Collapse Panels very easily and use them in our web pages. Enter your email address to subscribe to this blog and receive notifications of new posts by email. Subscribe to our Newsletter and connect with the growing community of Programmer, Bloggers, Marketers and SEO professionals around the world.

Log In. Forgot Password? Create Account. Toggle navigation More ASP. On clicking the arrow again the panel will collapse. Do you want to make an excellent light weight TreeView with jQuery then check my tutorial — How to create jQuery Treeview with minimum codes. Share this article.

Check out other articles on "ASP. Subscribe to receive notifications of new posts by email. Join over 81, other subscribers Don't worry we won't spam. Only 2 Emails in a Week. Please Share This Tutorial. Thank You! Search for:.Author : Corey Mwamba. Modern websites and applications are more dynamic than old style web pages, with several pieces of well-placed JavaScript providing smoother content updates, more intuitive user feedback and more responsive controls.

In this article I'll show you how this works, including a few examples to get you started.

css expand collapse div

When the "hide" link is selected, it and the list below disappear, and the "show" link is displayed. If you look at a print preview of the page, the toggle is not shown.

This method could also be used as a fall-back in CSS3-capable browsers that have JavaScript disabled, or a replacement technique for designers with more knowledge of CSS than JavaScript. Now we've walked through a simple example, lets look at the technique and surrounding concepts in more detail, and build it up into a nice-looking navigation menu.

Let's start our analysis by looking at a JavaScript-based solution; the part that contains the Wikipedia article contents menu. I've reduced the number of items on the list, for brevity. This takes the form of a table with one cell that contains a list. Why the table? Well, it's a table of contents.

But I also suspect the most convenient way to get the border to grow and shrink was to surround the menu in a table cell.

Collapsible Sections

There's then a script block that adds the switch. To make the switch, there are three functions contained in the file wikibits. The showTocToggle function in wikibits. Since the toggle is appended through JavaScript, it doesn't appear when printed. There's then a fairly short function to change the text of the switch, and lastly a longer block that actually does the work and applies the styles for the table. This all amounts to around forty lines of code for the switch. I'm going to try to recreate the Wikipedia menu, but only using CSS.

We'll lose some things on the way, but gain some benefits too. In this example, we'll use a slightly different approach — we'll use an anchor like this, not to navigate to another area of the page, but to toggle between two states: collapsed and expanded. To start with, the HTML for our menu looks like so:.

Like the Wikipedia content menus, we'll start with the menu expanded. Let's create two reasonably-named classes.I am using asp. For issue 2 I think you would need to post the code that invoked by the button. But it sounds like you have a logic error in that code somewhere. Thats works fine, however now whenever one of the div tags is expanded and the save button is clicked i. Is there any way of not specifying that the menu should be collapsed in the code, but instead, ask the div to say the same state as it is?

Java-Scrip & CSS : Expand and collapse function on an html table

So to leave it in its current state, you just need to not run any script that changes it. When I click the button Button1the button dissapears, i. It sounds like you have two states for your divs call them A and B and when certain buttons are clicked you want to achieve either A or B depending on which button is clicked. The problem is that your function is flipping the state without any regard for the current state. I think you need two functions which would be invoked by different buttons and set the state explicity rather than just flipping it.

Of course, you will have to put the actual ids for your divs in there. But that should work assuming I am understanding you correctly. There might be a cleaner way to do this with a flag. Personally I try to avoid flags unless it is going to save a lot of execution steps. The only thing that should change the state of the div is by clicking the anchor text in this instance Marital Status. The button has been included to show that the state of the div is changed by something other than a click of the anchor text Marital Status.

OK, I understand now. Thanks in advanced. Perhaps you could post the code in question. Thanks for all ur help.Use scale transforms when animating clips. You can prevent the children from being stretched and skewed during the animation by counter-scaling them.

The immediate problem with this approach is that it requires animating width and height. These properties require calculating layout, and paint the results on every frame of the animation, which can be very expensive, and will typically cause you to miss out on 60fps. An alternative to animating width and height might be to use the now-deprecated clip property to animate the expand and collapse effect.

Or, if you prefer, you could use clip-path instead. Using clip-pathhowever, is less well supported than clip. But clip is deprecated. While better than animating the width and height of the menu element, the downside of this approach is that it still triggers paint. Since this effect involves something getting bigger and smaller, you can use a scale transform. The downside to this approach, like most things in rendering performance, is that it requires a bit of setting up.

If you need to do that, however, be cautious: getBoundingClientRect or offsetWidth and offsetHeight forces the browser to run styles and layout passes if styles have changed since they were last run. In the case of something like a menu, we can make the reasonable assumption that it will start out being in its natural scale 1, 1.

This natural scale represents its expanded state, meaning you will need to animate from a scaled down version which was calculated above back up to that natural scale. But wait! Well, as you can see below, yes. So what can you do about this? There are two things to notice about that:. The counter-transform is also a scale operation. This is good because it can also be accelerated, just like the animation on the container.The Inclusive Components book is now available, with updated and improved content and demos.

Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop. Although the interaction is simple, it's an interaction that does not have a consistent native implementation across browsers — despite movement to standardize it. So why am I talking about it now, after covering more complex components?

Because this article will focus on developer and author experience: we're going to make our collapsible regions web components, so they are easy to include as part of larger patterns and in content files.

As we did when approaching tab interfaces, it helps to consider what our component would be in the absence of JavaScript enhancement and why that enhancement actually makes things better. In this case, a collapsible section without JavaScript is simply a section. That is: a subheading introducing some content — prose, media, whatever.

One advantage of collapsing the content is that the headings become adjacent elements, giving the user an overview of the content available without having to scroll nearly so much. Expanding the content is choosing to see it. Another advantage is that keyboard users do not have to step through all of the focusable elements on the page to get to where they want to go: Hidden content is not focusable.

Just attaching a click handler to the heading for the purposes of expanding the associated content is foolhardy, because it is not an interaction communicated to assistive software or achievable by keyboard. Instead, we need to adapt the markup by providing a standard button element.

css expand collapse div

The button is provided as a child of the heading. Screen reader users would lose the heading as a structural and navigational cue. Our component can be in one of two mutually exclusive states: collapsed or expanded. This state can be suggested visually, but also needs to be communicated non-visually. We can do this by applying aria-expanded to the button, initially in the false collapsed state.

Some make the mistake of placing aria-expanded on the target element rather than the control itself. This is understandable since it is the content that actually switches state.

But, if you think about it, this wouldn't be any good: the user would have to find the expanded content — which is only possible if it's actually expanded! State is, therefore, communicated through the control that one uses to switch it. Why yes. And unlike menu buttonswe are not instigating an immediate change of context by moving focus.

Building Performant Expand & Collapse Animations

Therefore, aria-haspopup is not applicable. Some folks add aria-controls and point it to the content container's id. Be warned that aria-controls only works in JAWS at the time of writing. The user will immediately encounter the expanded content as they move down the page. We've created a situation wherein we've employed a button, but a button that should look like an enhanced version of the heading it populates. The most efficient way to do this is to eradicate any user agent and author styles for buttons, forcing this button to inherit from its heading parent.

Great, but now the button has no affordance.This is a very simple tutorial on how to show and hide a division tag or Expand and collapse toggle div using simple jquery.

Tags: Jquery scripts.

Using CSS Transitions on Auto Dimensions

Your email address will not be published. How to delete a line in text file using Python. Get web page title meta tags using PHP. Javascript Detect browser close event alert message.

PHP Ajax example. Hit counter using php. Change web page title using javascript. Change webpage background color using javascript. Add to favorites or bookmarking using javascript in firefox and internet explore [IE]. Disabling right click menu using javascript Enhanced Version.

Shaking login form using jquery Shaking login form using jquery admin 15 May, May 15, Slideshow using jquery Slideshow using jquery admin 29 Dec, December 29, Leave a Reply Cancel reply Your email address will not be published. Like Us On Facebook. Search For More Tutorials. Python How to delete a line in text file using Python 24 Sep, JavaScripts Javascript Detect browser close event alert message 23 Dec, PHP Hit counter using php 23 Jan, JavaScripts Change web page title using javascript 15 Sep, This is good example for dynamic drop down menu using Thank you.

Hi how to fetch database table using curl, can you help Good read. Thank you, this is very helpfully.Plugin dependency: Collapse requires the transitions plugin to be included in your version of Bootstrap. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.

Options can be passed via data attributes or JavaScript. The following example makes a button toggle the expanding and collapsing content of another element:.

Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown. Your email address will not be published. Notify me of follow-up comments by email. Notify me of new posts by email. Bootstrap JS Collapse. JS Collapse collapse. For a tutorial about Collapsibles, read our Bootstrap Collapse Tutorial. Name Type Default Description parent selector false All collapsible elements under the specified parent will be closed when this collapsible item is shown.

Method Description. See options above for valid values. Event Description show. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Leave a Reply Cancel reply Your email address will not be published.

All collapsible elements under the specified parent will be closed when this collapsible item is shown.


thoughts on “Css expand collapse div

Leave a Reply

Your email address will not be published. Required fields are marked *