www.webdeveloper.com
Results 1 to 7 of 7

Thread: Linking text to javascript

  1. #1
    Join Date
    Oct 2012
    Posts
    11

    Linking text to javascript

    I have some javascript code that shows and hides a div when I click an image. The issue that I am having is that that the text next to the picture will not cause the same operation. The layout is (picture) text. The picture is an arrow and changes to an arrow of different orientation when it is clicked to represent expansion. Here is the javascript and HTML code.
    HTML Code:
    <img class="show" src="arrow_right.png" /><span>Text 1</span>
     <div class="toggle">Expanded text 1</div>
    Code:
    <script>
    $(document).ready(function(){
     $('.toggle').hide();
     $('.show').click(function(){
      var t = $(this);
      // toggle hidden div
      t.next().next().toggle('slow', function(){
       // determine which image to use if hidden div is hidden after the toggling is done
       var imgsrc = ($(this).is(':hidden')) ? 'arrow_right.png' : 'arrow_down.png';
       // update image src
       t.attr('src', imgsrc );
      });
     })
    })
    </script>
    All I need is for the text to have the same effect as the picture

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    The $('.show') only concerns the elements with a class name ".show". In this case only the image has that class not the span element next to it.
    If the only purpose of the .show class is to toggle the display of the div tag then you can change your HTML into.

    <img class="show" src="arrow_right.png" /><span class="show">Text 1</span>
    <div class="toggle">Expanded text 1</div>

  3. #3
    Join Date
    Oct 2012
    Posts
    11
    I tried that but it still does nothing when I click on the text.I was thinking that it would need to involve onClick but i'm not sure.

  4. #4
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    t.next().next().toggle('slow', function(){ ...})
    will only work for the image because next().next() skips one element that is the <span>...</span>

    You can just use $('.toggle') instead of t.next().next();

  5. #5
    Join Date
    Oct 2012
    Posts
    11
    I just tried that and it worked, but the issue is that when you click it now, it activates all of the div boxes that are hidden instead of just the one following the button. That is why I used t.next().next();

  6. #6
    Join Date
    Oct 2012
    Posts
    11
    im not sure if there could be an if statement that says if img {next.next} else {next} Im honestly a beginner so I'm not sure how well that will work.

  7. #7
    Join Date
    Oct 2012
    Posts
    11
    Never mind I figured it out, I just wrapped the entire thing in a span, gave that the show class, and changed the next.next to just next. Thanks for all the help!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles