www.webdeveloper.com
Results 1 to 12 of 12

Thread: Show/hide not working properly with jquery

Hybrid View

  1. #1
    Join Date
    Mar 2009
    Posts
    31

    Show/hide not working properly with jquery

    Hello,

    I have a page with three rows of main information that all have a 'More Info' button attached, sort of like http://www.wefollow.com and their info button.

    When the 'More Info' link is clicked a <tr> with a class of "mi" slides down above the main info.

    The problem that I am getting is hiding the <tr> before the 'More Info' link is clicked. There is just a blank space where the <tr> is. The info in the <tr> is being hidden with jQuery (script below) and then displays when 'More Info' is clicked.

    I tried hiding the "mi" with CSS but when the 'More Info' button is clicked, nothing happens.

    here is a picture of the problem:
    http://i645.photobucket.com/albums/u...1/Picture2.png

    Any help would be awesome. Thanks.

    Scripts:

    index:

    HTML Code:
    <table>
        <tbody>
    
            <tr id="info-1"> </tr>
            <tr class="mi">
                <td>
                    <div id="1" class="more-information" />
                </td>
            </tr>
    
            <tr class="">
                <td> </td>
                <td> </td>
                <td> <a id="1" class="more-info" href="#">More info</a> </td>
    
        </tbody>
    </table>
    listing.js:

    Code:
    $(function(){
    $(".more-information").hide();
    $(".more-info").click(function () {
    var divname= this.id; $("#"+divname).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
    return false;
    });

  2. #2
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    I see two problems in the markup. First, IDs must be unique. That means no two elements can have the same ID. And the second is that IDs cannot begin with a number. They must begin with a letter or underscore.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  3. #3
    Join Date
    Mar 2009
    Posts
    31
    Quote Originally Posted by Jeff Mott View Post
    I see two problems in the markup. First, IDs must be unique. That means no two elements can have the same ID. And the second is that IDs cannot begin with a number. They must begin with a letter or underscore.
    Alright, I changed all id's to something unique and none are starting with numbers but it is still not working properly.

  4. #4
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Can you link to or attach the full page you're working with now?
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  5. #5
    Join Date
    Mar 2009
    Posts
    31
    The files are on the localhost so I will post the files here.

    main file(function is called in the html page in an 'output-listings' div)
    buy.function.php:


    PHP Code:
    <?php
    function outputListingsTable()
    {
        
    $mysql = new mysqli('localhost''root''root''ajax_demo') or die('you\'re dead');
        
    $result $mysql->query("SELECT * FROM explore") or die($mysql->error);

        if(
    $result
        {
            echo 
    "<div class=\"main-info\"> \n";
                echo 
    "<table class=\"listings\"> \n";
                    echo 
    "<tbody>";
            
                        while(
    $row $result->fetch_object()) 
                        {
                            
    $id $row->id;
                            
    $siteName $row->site_name;
                            
    $siteDescription $row->site_description;
                            
    $siteURL $row->site_url;
                            
    $sitePrice $row->site_price;
            
                
                            echo 
    "        <tr id=\"info-" .$id"\"> \n";
                                            echo 
    "<tr class=\"mi\"><td><div id=\"more-" .$id"\" class=\"more-information\"> \n";
                                            echo 
    "</div></td></tr> \n";
                            echo 
    "         <td>" $siteName "</td> \n";
                            echo 
    "        <td>" $siteURL "</td> \n";
                            echo 
    "        <td><a id=\"" $id "\" class=\"more-info\" href=\"#\">More info</a></td> \n";    
                            echo 
    "        </tr>";
                        }
            echo 
    "</tbody>";
        echo 
    "</table> \n";
    echo 
    "</div> \n";            

        }

    }

    ?>
    listing.js:

    Code:
    $(function(){
    	$("tr").hover(function(){
    		$(this).addClass("hover");
    	}, function() {
    		$(this).removeClass("hover");
    	});
    	$(function() {
    	$("a.more-info").click(function() {
    	$("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
    	return false;
    	});
    });
    
    
    });
    style.css:

    Code:
    tr.hover td { background: #FDFFE7; }
    	table { border-collapse:collapse;
    			color:#3F3F3F;
    			font-family:arial,helvetica,sans-serif;
    			border-top:1px solid #DFDFDF;
    		  }
    td.more-information { padding: 0px; }
    
    div.more-information { display: none; }

  6. #6
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    The PHP code doesn't do us any good because this issue is at the front-end. Can you view your page, then view the source and paste that source here in a code block?
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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