javascript - I need help in creating 4 collapsible panels using jquery -

-

I am totally new to jquery view, and there is a problem that is trying to understand it . My problem is this:
I am creating a website for a project, and this website is based on one square (700px to 700px) which is divided into 4 small sections - all 350px by 350px. What I want to do is, there is a panel covering each of these small sections, when clicked, they move away to reveal the material behind them, two panels on the left will slide to the left and disappear And both of them on the right side will slide to the right and will disappear.
If possible, then only one panel will be missing at a time. So, as any one will click a new panel, it will come back in a previous situation, hide its contents again.

Any help would be greatly appreciated!

The way you are interested, there are several ways to do this. CSS transition has already been mentioned. I have included a work example but it is the lot - you should take it in the right direction. Please take a look at the links given below - they got very good information.

If you have four elements, and the main function of the cover can only be cover , you can use: after (or: before). Here's what HTML markup can look like if your panel li element: 

  & lt; Ul & gt; & Lt; Li id = "panelOne" & gt; A & lt; / Li & gt; & Lt; Li id = "panelTwo" & gt; Two & lt; / Li & gt; & Lt; Li id = "panelThree" & gt; Three & lt; / Li & gt; & Lt; Li id = "Panel Fool" & gt; Four & lt; / Li & gt; & Lt; / Ul & gt;

Since the covers are only for hiding the four panels and they are pseudo elements, so you can type them in your CSS. You can start by styling your HTML elements: 

  ul {display: block; Background: black; Width: 700px; Height: 700px; Margin: 0 auto; } Li {Float: left; Status: Relative; Background: white; Limit: 1px solid black; Width: 350px; Height: 350px; }

then covers after your : 

  li: {display: block; / * Background color is just to make the cover more visible / background: red; Status: Completed; Top: 0; Left: 0; Width: 350px; Height: 350px; material: ""; }

If you are on a panel at a time (for example, ". Clicked "), then you . Clicked <> pseudo-element so they are moved left or right: 

  li # panelOne.clicked: after, li # panelThree.clicked: {-webkit-transform: after translateX ( -350px); -MOZ-TRANSFORM: Translator X (-350px); -mms-transform: translate x (-350px); -O-Transform: Translator X (-350px); Conversion: Translator X (-350px); } Li # panelTwo.clicked: after, li # panelFour.clicked: after {-webkit-transform: translateX (350px); -MOZ-TRANSFORM: Translation X (350px); -mms-transform: translatex (350px); -o-transform: translate X (350px); Conversion: Translator X (350px); }

Use jQuery to add or remove classes: 

  $ ('li') .click (function () {// First, add all the panels $ ('le') .removeClass ('clicked') to square; // then add to the panel that has been clicked on $ (this). AddClass ('clicked');});

And one more step: Because you want to slide the armor left or right, you have to add it to get it. You can put them in your in: pseudo-element styles: 

  - WebKit-Infection: -WebKit-transformer 500 mms low-out S; -Moz-transition: -Moz-transform 500 mms low-out S; -O-Infection: -A-transform 500 MMS low-out S; Infection: 500ms easily out 0s;

And here's how it will look in one JSFedal:


Comments

Post a Comment

Popular posts from this blog

import - Python ImportError: No module named wmi -

-
I followed the instructions for downloading WMI for Python When I try to run the code for C.Win32_Service (StartMode = "Auto", state = "Stopped") import wmi c = wmi.WMI (): if Raw_input ("restart% s?"% S.Caption) .upper () == "Y": s.StartService () I got the error < Code> traceback (most recent call end): file ". \", Line 1, edit: I am using Python 2.7.6 EDIT2: I am running 64-bit Windows 2008 R2, and I've downloaded WMI-1.4.9.zip (md5). I removed the content and put it in D: Python \ Tools \ Scripts I executed dragon setup.py.install I said D : \ Python \ tools \ scripts to% PATH% and when I execute the code for C.Win32_Service (StartMode = "Auto", state = "Stopped") import wmi c = Wmi.WMI (): If raw_input ("Restart% s?"% S. Caption). () == "Y": s.StartService () error me Gets traceback (most recent call final): File ". See \", line 1, &
Read more

Editing Python Class in Shell and SQLAlchemy -

-
I am working on the terminal on a shell script after this tutorial SQLAlchemy tutorial. I need to type gt; & Gt; & Gt; Sqlalchemy import column, integer, string & gt; & Gt; & Gt; Class user (base): __tablename__ = 'users' id = column (integer, primary_key = true) name = column (string) absolute name = column (string) password = column (string) def __repr __ (self): return "& lt ; User (name = '% s', absolute name = '% s', password = '% s') & gt; "% (Self.name, self.fullname, self.password) After the problem I have typed the password = column (string) I hit twice and changed .... >> I then took everything back but then an error was thrown because the class already exists ... I am not completely sure how to fix it. How do I open that slip in the shell script and edit it (Add DF to DRR) The error thrown below: / user / giripeters / TFSQLLX / Lib / python2.7 / site-packages / sqlalchemy / ext / decla
Read more

c# - MySQL Parameterized Select Query joining tables issue -

-
I am using parameterized select questions in conjunction with my program and it works entirely, When I try to join the table Everything I have done is a small fraction: using (MySqlCommand cmd = new MySqlCommand (paramQuery) ToSql (), Connection)) /etc/ paramQuery.ToSql () Equal: "Select TableOne ID, Tableon, Department, Tablet. One by name table, Table 2 h Yes TableOnEID = @Pharmak "* / for (Int Index = 0; Index and Lt; ParamariX Parameter (.c calculation; Index ++) Cmd.Parameters.AddWithValue (paramQuery.Parameters (). ElementAt (index). , ParamQuery.Parameters (). ElementAt (index) .Value); / * ParamQuery.Parameters (). ElementAt (index) .k = "@most 0" paramQuery.Parameters (). ElementAt (index) .Value = "tableTwo.ID" * / MySqlDataReader Reader = cmd.ExecuteReader (); While (reader.Read ()) {// do stuff} } One of the tables I attempt to join is For the table, two with the same id for all. Is there something that I'm doing wrong?
Read more