Create shortcode in html with jquery?

Discussion in 'HTML & Website Design' started by aka.junpri, May 4, 2014.

0
  1. #1
    hello everybody....

    does anyone know how to implement wordpress like shortcode in html with jquery without php function?

    for example when i write this code:
    [accordion]<br />
    [item title="Item 1"]Integer eleifend nibh magna, ac fermentum nulla pellentesque non. In nisi est, sollicitudin at mollis sit amet, auctor ut nibh. Fusce ut purus at sapien auctor tempus sit amet nec sapien.[/item]<br />
    [item title="Item 2"]Integer eleifend nibh magna, ac fermentum nulla pellentesque non. In nisi est, sollicitudin at mollis sit amet, auctor ut nibh. Fusce ut purus at sapien auctor tempus sit amet nec sapien.[/item]<br />
    [item title="Item 3"]Integer eleifend nibh magna, ac fermentum nulla pellentesque non. In nisi est, sollicitudin at mollis sit amet, auctor ut nibh. Fusce ut purus at sapien auctor tempus sit amet nec sapien.[/item]<br />
    [/accordion]

    it will be converted to this code when page loaded:

    <div class="shortcode sc-accordion" id="accordion-0">
    <h5 class="toggle"><a href="#accordion-0" class="active"><span class="arrow">-</span>Item 1</a></h5>
    <div class="toggle-content" style="display: block;">Integer eleifend nibh magna, ac fermentum nulla pellentesque non. In nisi est, sollicitudin at mollis sit amet, auctor ut nibh. Fusce ut purus at sapien auctor tempus sit amet nec sapien.</div>

    <h5 class="toggle"><a href="#accordion-0"><span class="arrow">+</span>Item 2</a></h5>
    <div class="toggle-content" style="">Integer eleifend nibh magna, ac fermentum nulla pellentesque non. In nisi est, sollicitudin at mollis sit amet, auctor ut nibh. Fusce ut purus at sapien auctor tempus sit amet nec sapien.</div>

    <h5 class="toggle"><a href="#accordion-0"><span class="arrow">+</span>Item 3</a></h5>
    <div class="toggle-content" style="">Integer eleifend nibh magna, ac fermentum nulla pellentesque non. In nisi est, sollicitudin at mollis sit amet, auctor ut nibh. Fusce ut purus at sapien auctor tempus sit amet nec sapien.</div>

    </div>

    see the example in this page: simmerdemo[.]blogspot[.]com/p/accordions-and-toggles.html

    I think it's just using jquery to convert element, but I am not very expert in jquery...

    Please help me..
     
    aka.junpri, May 4, 2014 IP
  2. xXxpert

    xXxpert Well-Known Member

    Messages:
    604
    Likes Received:
    34
    Best Answers:
    9
    Trophy Points:
    165
    Digital Goods:
    7
    #2
    Hands UP :D I have not seen this type of thing done with HTML/JavaScript only in my 4 years coding experience
     
    xXxpert, May 5, 2014 IP
  3. aka.junpri

    aka.junpri Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    so how the admin of simmerdemo[.]blogspot[.]com/p/accordions-and-toggles.html do that?
     
    aka.junpri, May 5, 2014 IP
  4. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #4
    Try something like this: http://jsfiddle.net/Gg4eP/2/
     
    ketting00, May 5, 2014 IP
  5. aka.junpri

    aka.junpri Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    nice script brother...but my focus is the shortcode function :)

    changing [accordion] to be <div class="shortcode sc-accordion" id="accordion-0">
     
    aka.junpri, May 6, 2014 IP
  6. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #6
    That's probably because it isn't, and shouldn't ever be. Now that you mention client-side scripting -- that is NOT what it's built for! Even server-side shortcodes are a meaningless, pointless garbage. It can efficiently sweep crappy code under the rug, but that's just about it (if you want an example, look no further).

    @OP, with all due respect, back the **** away from the keyboard! Thank you ^^
     
    wiicker95, May 6, 2014 IP