How can I make a "more details" button?

Discussion in 'HTML & Website Design' started by V-B, Jun 24, 2012.

0
  1. #1
    I have my items listed, there are currently too many to scroll down, so I want to reduce what is showing to a picture, short description and then have a "More details" button. People can click on that to show the long description and more pictures below. Then when they click back on it, the long description gets hidden.

    How can this be possible?

    Thanks in advance
     
    Solved! View solution.
    V-B, Jun 24, 2012 IP
  2. metalstein

    metalstein Well-Known Member

    Messages:
    660
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    110
    #2
    you can do that with JS
    another solution is anchor link. you can show button up of the page with little desc. and make link to the down. with all desc you can make another anchor to the top (less desc)
     
    metalstein, Jun 24, 2012 IP
  3. V-B

    V-B Greenhorn

    Messages:
    44
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    18
    #3
    Thanks, but I do not like your second solution.

    Is there a way to do this in HHTML5?
     
    V-B, Jun 24, 2012 IP
  4. #4
    You can do it with jQuery.
    (include jQuery first)

    [COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]a [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]href[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"#" [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]id[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"toggle" [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]onclick[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"$('#hidden').slideToggle();"[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]Toggle Content [/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]a[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR]
[COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]div [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]id[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"hidden" [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]style[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"display:none"[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR]
[COLOR=#000000][FONT=Inconsolata]    [/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]This content is hidden first[/FONT][/COLOR]
[COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]div[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR]
[COLOR=#000000][FONT=Inconsolata]​[/FONT][/COLOR]
    Code (markup):
     
    t3ster, Jun 24, 2012 IP
  5. mparkar26

    mparkar26 Banned

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Jquery (Slide Toggle) is the best solution for it.
     
    mparkar26, Jun 28, 2012 IP