Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Toggle script that will show/hide a textarea

    Hello,

    I have a toggle script that will show/hide a textarea. Until that point it works but I'm looking to be able to use the same jquery code for multiple textareas.
    At this moment the jquery is binded to a single selector. What can I do to get it to work with multiple textareas? Can someone example some code for me? I'm already looking for a while for this. I just want a small adjustment in the code. It is no problem to use link1, link2, link3 for example for me.

    HTML:
    Code:
    <p><a href="#" id="link">Show source</a>
    </p>
    <textarea id="source">This is the source of the textarea</textarea>
    <br>
    <p><a href="#" id="link">Show source 2</a>
    </p>
    <textarea id="source">This is the source of the textarea 2</textarea>
    <br>
    <p><a href="#" id="link">Show source 3</a>
    </p>
    <textarea id="source">This is the source of the textarea 3</textarea>
    Jquery:

    Code:
      $(document).ready(function () {
          $('textarea').focus(function () {
              this.select();
          });
          $('#link').click(function () {
              $('#source').toggle();
              if ($('#source').is(':hidden')) {
                  $(this).text('Show source');
              } else {
                  $(this).text('Hide source');
                  $('#source').select();
              }
          });
      });

    CSS:

    Code:
       #source {
            display: none;
        }
    I also have the example on jsfiddle: Edit fiddle - JSFiddle

    Thanks in advance for any help!

    grid

  • #2
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Easiest way: wrap the text area in a container (like a div) and have the toggle link in the same wrapper.

    Then when someone clicks the link, you do a sibling search (.sibling('textarea')) and you can get the textarea to hide/reveal.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Keleth, thanks for your fast response. Are you be able to give me an example post maybe on jsfiddle. I have no idea how I can do it exactly. I'm not a good jquery coder. I only make PHP howto's for myself. It is no problem to use another div for each textarea. Actually I have that already in the official code.

    I have it like:

    <p id="box1"><a href="#" id="link">Show source</a>
    </p>

    <textarea id="source">This is the source of the textarea</textarea>
    Last edited by grid_; 03-04-2014 at 09:44 PM.

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    I'm typically not a do to teach person, but I'll give you the head start:

    First, sibling selector: https://api.jquery.com/siblings/

    Update the fiddle to wrap each textarea in a div, and have the toggle link in the same div. Then, instead of $('#link'), you want to select the link, attach .siblings with textarea as the selector, and toggle that.

    If you can't get that working, I'll help you edit the fiddle directly

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Keleth, I did some research on siblings on google, then I found a script at jsfiddle that didn't have anything to do with a textarea, but I could edit it, so I came to this: JQuery toggle - JSFiddle
    Besides the use of sibling I think it is pretty straightforward, but I want to change the class that has left to an id attribute and that wouldn't work, can you help me a little bit? Thanks in advance ofcourse

    grid

  • #6
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    So not exactly what I was thinking, but as you can see, it works.

    Now, some notes: you're using ids over and over. This is a big no no, a big wrong. Ids should be unique. You can easily use a classes instead of ids here; it'd be more semantically correct and make the jQuery easier to run. I'm not sure what you mean by "change the class that has left to an id attribute". On top of that, you're using the selector 'a.#link' which makes no sense. '.' denotes class, '#' denotes id.

    Additionally, you're looping through each dropdown div for some reason. You're not doing anything to the dropdown divs, so why? You just want the links.

    Check this out and see the difference: JQuery toggle - JSFiddle

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    You are absolute right. ID's should be unique. So I change it back again to produce it with classes. Thanks for your post but I see the links don't work at JQuery toggle - JSFiddle
    I'm gonna play with the jsfiddle posts also again. So I hope I can report soon what I think is good for a result

    EDIT: http://jsfiddle.net/Ab9vX/
    Last edited by grid_; 03-04-2014 at 11:35 PM.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I have simplified it and made it more efficient by attaching the click handler to only one element instead of attaching it to each of the container div. This is called an event delegation technique.

    JQuery toggle - JSFiddle
    Code:
    <style>
    .container textarea {
        display: block;
    }
    .container .hide {
        display: none;
    }
    </style>
    <div id="wrapper">
        <div class="container">
            <a href="#" class="link">Show source 1</a>
            <textarea class="hide">bla 1</textarea>
        </div>
        <br />
        <div class="container">
            <a href="#" class="link">Show source 2</a>
            <textarea class="hide">bla 2</textarea>
        </div>
        <br />
        <div class="container">
            <a href="#" class="link">Show source 3</a>
            <textarea class="hide">bla 3</textarea>
        </div>
    </div>
    <script>
    $(document).ready(function () {
        $('#wrapper').on('click', '.link', function (){
            $(this).next().toggleClass('hide');
            return false;
        });
    });
    </script>

  • #9
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello glenngv,
    Thanks looks good! It is a very small and fresh code. I like that. Can you also toggle the text to 'Hide source' when you press 'Show source' ? I was also already working on that for the last couple of hours I understand that you are using an event delegation technique. That would be the best situation in most cases. But in my case I have a very large file that has very much different chapters so I think it would be better to attach the handler to each container. Can you change that? I can use the wrapper id again but div id's should be unique like Keleth said


    Thanks for any help!

    grid
    Last edited by grid_; 03-05-2014 at 01:50 AM.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You can use document instead of the wrapper div. I just used wrapper div as it is recommended to attach the event handler to the closest available ancestor element for efficiency.
    Code:
    $(document).on('click', '.container .link', function (){
        $(this)
            .next()
            .toggleClass('hide')
            .end()
            .html($(this).next().is(':visible') ? 'Hide source' : 'Show source');
        return false;
    });
    Untested but you should get the idea.

  • Users who have thanked glenngv for this post:

    grid_ (03-05-2014)

  • #11
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    glenngv, thank you! I ended up with this one: JQuery toggle - JSFiddle I did also add a select function to select the text so I can copy it fast. I assume you would put the select() function in the same place I did. Well it works perfectly until now.

    JQuery toggle - JSFiddle
    Code:
    $(document).on('click', '.container .link', function (){
        $(this)
            .next()
            .toggleClass('hide')
            .select()
            .end()
            .html($(this).next().is(':visible') ? 'Hide source' : 'Show source');
        return false;
    });
    Have a nice day all,

    grid


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •