Solved

Toggle row show & hide by clicking on image

Posted on 2013-06-23
3
817 Views
Last Modified: 2013-06-23
Hi
I have the following code work fine when I click on the on the row and the row below shows or hides. But I would like to change to when the user clicks on the div tag with the arrow class instead.

You can see a working demo of this at http://www.afthab.co.uk/test/

This is the jquery code that currently toggles row show and hide
        $("#table_id tr:odd").addClass("master");
        $("#table_id tr:not(.master)").hide();
        $("#table_id tr:first-child").show();
        $("#table_id tr.master").click(function(){
            $(this).next("tr").toggle();
            $(this).find(".arrow").toggleClass("up");
        }); //#table_id tr.master

Open in new window


And I have attached the 2 files that contain main code.

Thank you for any help in advance.
index.php
loaddata.php
style.css
0
Comment
Question by:ACEAFTY
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 15

Expert Comment

by:Insoftservice
ID: 39269725
Sorry did not got your question.
Do you mean to say if you click on arrow symbol then and then only toggle should take place right?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39269730
$(".arrow").click(function(){
            $(this).closest("tr").next("tr").toggle();
});

http://jsfiddle.net/zBuh8/1/
0
 
LVL 1

Author Closing Comment

by:ACEAFTY
ID: 39269743
Thanks that worked perfectly.
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question