In this example, I will show you how we can use jquery fadeToggle function to achieve the behaviour described below!
What we have here, is some menu blocks, which show a lager block with more details, when we click on them. You can see a demo here. Only first block works, as it is under construction.
Before we click the first menu block
After we click the first menu block
Html markup
As you can see below, we have a div with class "box", and inside this div we have 2 main elements:
Css styles
Below you can see the css styles for our example. Just to say, that box_details has an absolute position. (accordingly, div with id "box1", has relative position) and display:none, which will change to block, when div with class box is clicked.
Javascript
Finally, we use javascript and fadeToggle function. I think it's pretty easy and self-explanatory. Wheneverer we click the box div, we find next box_details div, and make it fade in. When we click on the appeared div, it fades out. This is achieved with the use of fadeToggle.
What we have here, is some menu blocks, which show a lager block with more details, when we click on them. You can see a demo here. Only first block works, as it is under construction.
Before we click the first menu block
Html markup
As you can see below, we have a div with class "box", and inside this div we have 2 main elements:
- an anchor tag, with a background-image as you can see in the css style later
- div with class "box_details" , which has an absolute position.
Css styles
Below you can see the css styles for our example. Just to say, that box_details has an absolute position. (accordingly, div with id "box1", has relative position) and display:none, which will change to block, when div with class box is clicked.
Javascript
Finally, we use javascript and fadeToggle function. I think it's pretty easy and self-explanatory. Wheneverer we click the box div, we find next box_details div, and make it fade in. When we click on the appeared div, it fades out. This is achieved with the use of fadeToggle.
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου