Combine anchor, url variable and toggle visibility

Question

I am using this code to toggle visibility

var prevId;

function toggle_visibility(id) {
   if(prevId){
      $("#"+prevId).slideToggle("slow");
   }
   var e = document.getElementById(id);

      $(e).slideToggle("slow");
   prevId = id;

}

On the div that appears I am using this to display the data from the database

<?php 
include"scripts/connect_to_mysql.php";
mysql_query("SET NAMES 'utf8'");
mysql_query("SET CHARACTER SET 'utf8'");

$news="";
$sql=mysql_query("SELECT *
FROM `news` 
ORDER BY date DESC"); 
$newsCount=mysql_num_rows($sql);
if ($newsCount>0) {
    while($row=mysql_fetch_array($sql)){
        $id=$row["id"];
        $title=$row["title"];
        $text=$row["text"];
        $date=$row["date"];
        $news.=' <table width="800" border="0">
  <tr>
    <td style="width:150px;">' . $date . '</td>
    <td style="width:600px; overflow:hidden;"><a href="?id=' . $id . '#" onclick="toggle_visibility(\'news_det\');" style="color:#b19057;" >' . $title . '</a></td>
    <td style="width:50px"><a href="#" onclick="toggle_visibility(\'news_det\');" style="color:#000;">...more</a></td>
  </tr>
</table>
';
    }

}else {
    $news="No news available yet";
}

?>

The problem is that if i click on this link

<a href="?id=' . $id . '#" onclick="toggle_visibility(\'news_det\');" style="color:#b19057;" >' . $title . '</a>

the toggle starts but interrupts on the first click, but works on the second.

Any ideas on what I am doing wrong?

news_det is the hidden div that sould become visible onclick — Alexandros Tseros
– Alexandros Tseros, Commented Mar 21, 2014 at 10:32
can you make working demo of your code on jsfiddle.net with some dummy data — TheMohanAhuja
– TheMohanAhuja, Commented Mar 21, 2014 at 10:34
so what I guess you want to do is showing detail on click of title and hiding detail again on click of NEWS tab and showing list again, right? — TheMohanAhuja
– TheMohanAhuja, Commented Mar 21, 2014 at 10:53

TheMohanAhuja · Accepted Answer · 2014-03-21 11:40:12Z

1

I have two recommendation for your code to solve your problem

One Way

Change your JavaScript function to something like this

var prevId;

function toggle_visibility(id, newsId) {
    if (prevId) {
        $("#"+prevId).slideToggle("slow");
    }
    $("#"+id).slideToggle("slow");
    if (id=="news_det" && newsId!=undefined) {
        var val=$("#det_"+newsId).val();
        $('#news_detDiv').html(val);//Where you are putting text that div id
    }
    prevId = id;
    return false;
}

Change your html snippet from $news variable to this

$news.='<table width="800" border="0">
    <tr>
        <td style="width:150px;">' . $date . '</td>
        <td style="width:600px; overflow:hidden;"><a href="#" onclick="toggle_visibility(\'news_det\', '.$id.');" style="color:#b19057;">' . $title . '</a></td>
        <td style="width:50px"><a href="#" onclick="toggle_visibility(\'news_det\', '.$id.');" style="color:#000;">...more</a></td>
        <input type="hidden" value="'.$text.'" id="det_'.$id.'">
    </tr>
</table>';

In this way you will save your server call, since you will be storing all your text in your page only and you will always see relevant post data on click of title & more. Moreover your effect will also work.

Second Way

You should use JQuery AJAX call on click of title & more to get data from server instead of going with refreshing page.

Happy Coding!!!

answered Mar 21, 2014 at 11:40

TheMohanAhuja

1,8752 gold badges19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexandros Tseros Over a year ago

could you provide also a solution with AJAX??? I have never tried coding with AJAX before, so I wouldnt know where to start. Thank you for your time.. @TheMohanAhuja

Alexandros Tseros Over a year ago

<a href="#" onclick="newsdata(\'news_detx1\','.$id.');" style="color:#b19057;">' . $title . '</a> function newsdata(id, currid) { $("#news_exp").slideUp("slow"); $("#news_detx1").slideDown("slow"); $("#news_detx1").load( "test.php?id="+currid ); return false; } works great!!!

Collectives™ on Stack Overflow

Combine anchor, url variable and toggle visibility

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related