Build Javascript Accordian with special Opacity feature

  • Status: Closed
  • Præmier: $250
  • Modtagne indlæg: 9
  • Vinder: kayecandy

Konkurrence Instruktioner

This contest is to create a JSS\CSS accordian of the type in the attached image. The key is projecting a repeatable pattern with different opacities in the segments of the accordian.


Load as a transparent iframe. It is essential to see a wallpaper image (1920x900) on the main page that sits under the accordian. Please build this into your demo adopting any wallpaper photo.

Attached below is one pattern but the pattern must be changeable.

The pattern affect must be used in each segment of the accordian.

The pattern affect must display with different opacity in each segment.

The pattern affect must display with different tints of black\grey - exactly like the prototype image.

The accordian must enable dragging image elements between segments of the accordian.

100% width of screen.

80% height of the screen.

The vertical grey lines must be exactly the same.

The vertical grey lines must be draggable.


The code must be clean, structured, minimal external frameworks.
The code might need to be called as a DIV so keep it easy to read.

The pattern\opacity must be a backgrund so that it is easy to add foreground elements later.

Each accordian segment must be its own DIV so that it's easy to populate foreground objects.

Whomever makes this first is the winner! Provided the source code is clean and structured.

You may use an external accordian library.

Anbefalede Evner

Arbejdsgiverfeedback

“ Very cool freelancer”

Profilbillede sunnyguptahotels, Australia.

Bedste indlæg fra denne konkurrence

Se flere indlæg

Offentlig Præciserings Opslagstavle

  • sunnyguptahotels
    Konkurrenceafholder
    • 1 year ago

    I have seen an entry and am likely to award it the clear winner. My advise is that no one should put any further development effort into this.

    • 1 year ago
    1. TheGuyver2040
      TheGuyver2040
      • 1 year ago

      Please don’t forget about your other contest.

      https://www.freelancer.com/contest/windows-file-sync-open-source-client-and-outlook-integration-1112209.html

      • 1 year ago
  • alalfakawma
    alalfakawma
    • 1 year ago

    Gonna work on this and submit an entry tomorrow

    • 1 year ago
    1. sunnyguptahotels
      Konkurrenceafholder
      • 1 year ago

      There are two original images in the contest brief showing what the end should look like (conceptually). It should have the pattern, varying opacities per segment (regardless if open), and the exact width proportions for each segment as shown in original image. Look in the contest brief and you'll see the images.

      • 1 year ago
    2. alalfakawma
      alalfakawma
      • 1 year ago

      Alright, done, please check it out here - https://codepen.io/alalfakawma/full/OjdepX/

      • 1 year ago
  • sunnyguptahotels
    Konkurrenceafholder
    • 1 year ago

    Please note some essential things:- 1. The segment width proportions in the original image must be maintained. 2. Use a B&W background image so I can judge the opacity on each segment. 3. The accordian must have some smooth tweening. The smoothness is a major aesthetic feature.

    • 1 year ago
    1. alalfakawma
      alalfakawma
      • 1 year ago

      Done, please check it on the same link. https://codepen.io/alalfakawma/full/OjdepX/

      • 1 year ago
  • majumderranit81
    majumderranit81
    • 1 year ago

    Hi there!
    I have more than 7 years of experience in front-end development as a Javascript / jQuery developer. I can give you more quality work on time. Please do not ignore me as a new profile.

    Lets have a discussion over chat.

    Thanks and regards
    Ranit Majumder

    • 1 year ago
    1. majumderranit81
      majumderranit81
      • 1 year ago

      sir, when user clicks on the collapsed accordian, the accordian will expand by 100% width of the screen and 100% height of the screen? as i am seeing in the picture?

      • 1 year ago
    2. majumderranit81
      majumderranit81
      • 1 year ago

      and sir what is use of those yellow circles?

      • 1 year ago
  • CallanM
    CallanM
    • 1 year ago

    What do you mean when you say the grey lines must be draggable?

    • 1 year ago
    1. sunnyguptahotels
      Konkurrenceafholder
      • 1 year ago

      The vertical grey lines that separate the accordian segments must be draggable so that the user can make the accordian segments the size they wish. However, this grey line draggable is not an absolute requirement if everything else is good.

      • 1 year ago
  • lunagariya124rah
    lunagariya124rah
    • 1 year ago

    working on it

    • 1 year ago

Vis flere kommentarer

Sådan kommer du i gang med konkurrencer

  • Opret din konkurrence

    Opret din konkurrence Hurtigt og nemt

  • Få tonsvis af indlæg

    Få tonsvis af indlæg Fra hele verden

  • Tildel det bedste indlæg

    Tildel det bedste indlæg Download filerne - Nemt!

Opret en Konkurrence Nu eller slut dig til os i dag!