The most clear way is to assign a single click handler:
HTML:
<div class="contents">
<div id="abstract">Bla bla bla bla </div>
<div id="somethingelse">Bla bla bla bla </div>
</div>
<ul class="links">
<li><a href="#abstract">How to write an Abstract</a></li>
<li><a href="#somethingelse">How to write something else</a></li>
</li>
And in the document's <head>:
(hope google groups doesn't break it too much)
<script type="text/javascript">
$(document).ready(function(){
$('.links a').click(function(){ //get all <a> elements inside the
element with class "links"
var id = $(this).attr('href').substring(1); //get the
content's id
$(id).slideToggle(); //toggle visibility of the contents
});
});
A glance at the docs (docs.jquery.com) should give you an insight of
what's going on.
As for the PHP, you can't actually pass a Javascript variable to it.
PHP is parsed/executed server-side, way before javascript. To get data
on-demand based on a javascript variable you need to use Ajax.
(docs.jquery.com/Ajax)
- ricardo
</script>
On Nov 11, 5:01 pm, Oli <[EMAIL PROTECTED]> wrote:
> Thanks Mike for your reply.
>
> Okay, I have implemented this in a static mode:
>
> http://www.uniquebrand.co.uk/education/index.php
>
> Under Online resources if you click on these two links
> How to write an Abstract
> How to Write a Good Essay
>
> You will see the effect that I am trying to achieve. It does serve my
> purpose but the links and their IDs are not dynamically generated. I
> want to do the same kind of slide up and down for dynamically
> generated content. Does it explain my goal clearly?
>
> Sorry, I am not a native english speaker. So, apologies for any
> confusion.
>
> Many Thanks :)
>
> On Nov 11, 6:54 pm, "Michael Geary" <[EMAIL PROTECTED]> wrote:
>
> > Could we back up a bit and have you describe very simply how you want this
> > page to work? Leave out all of the implementation details like the IDs and
> > the JavaScript code. Simple HTML is OK if that helps describe what you want.
>
> > It looks like you're pretty far off track on the implementation (no offense
> > intended! We'll help you get back on track), but it would be hard to suggest
> > a better approach without understanding what this will look like to the
> > visitor to your site and how they will interact with it.
>
> > Thanks,
>
> > -Mike
>
> > > From: Oli
>
> > > Hi guys,
>
> > > I am really excited about what I can do with JQuery, I just
> > > managed to finish one simple demo which basically allows a
> > > new css div to slide open when people click on a link. The
> > > initially technique was all fine except everything there is
> > > static. I then tried something dynamic where I got myself stuck.
>
> > > Let me explain a bit more, for each of the following
> > > hyperlinks I'd like to load the id from the database. So,
> > > they will look as follows:
>
> > > <a href="#" id="123" onclick="setID(123)">How to ride a
> > > bike</a> <a href="#" id="124" onclick="setID(124)">How to
> > > play football</a>
>
> > > Now, obviously the content for each different link will be different.
> > > So, I thought of using a javascript function called setID()
> > > that takes the id from the link and pass it on to the jquery
> > > functinons. So rather than having to check for each and every
> > > links like this:
>
> > > $("#link1").click(..............
> > > $("#link2").click(............
> > > $("#link3").click(.............
>
> > > and so forth and so on, this little trick will do the job
> > > where one funtion will take care of all the links and their
> > > values and hence no repeat.
>
> > > $((i)).click( -----
>
> > > where i is the global variable that stores the link ID.
>
> > > It works to some extent but not entirely right. I used an
> > > alert(i); call to check the value and this is what I am
> > > finding difficult to comprehend.
>
> > > say, i click on first link whose id is 123, a popup window shows #123.
> > > it then slides open the show div.
> > > if i want to close it I can just hit the hide me button and
> > > it hides the div, no problem.
> > > all fine uptil here.
>
> > > Now, the interesting and the difficult bit that I dont have
> > > any clue whatsoever is when I click on any part of the web
> > > page and find the div slides open automatically. I printed
> > > the ID and it occured to me because I didnot initialise the
> > > global variable after hiding the div first time, the next
> > > click event is using the old value. So, I created a fucntion
> > > called init(), all it does it set the global variable i to null.
>
> > > But it doesnot resolve my problem. I would also like to use
> > > php and database in order to populate content for show div.
> > > Any idea how passing javascript variable to php script will
> > > work in this context?
>
> > > Here is my code:
>
> > > <script type="text/javascript">
>
> > > var i = "";
>
> > > function setID(x){
> > > i = "#"+x;
> > > }
>
> > > function init(){
> > > i = "";
> > > }
>
> > > $(document).ready(
> > > function(){
>
> > > $("#showResource").hide();
> > > $((i)).click(
> > > function(){
> > > alert(i);
> > > init();
> > > $("#showResource").slideDown(800);
> > > return false;
> > > }
> > > );
>
> > > $("#hideMe").click(
> > > function(){
> > > $("#showResource").slideUp(800);
> > > return false;
> > > }
> > > );
> > > }
> > > );
> > > </script>
>
> > > <style type="text/css">
> > > #show{border:1px #cfdfef solid; width:96%;
> > > background:url(images/ hide_me.gif);
> > > background-position:right bottom; background-repeat:no-
> > > repeat; margin-bottom:10px; color:#333333; font-family:Arial,
> > > Helvetica, sans-serif; font-size:11px; padding:10px;
> > > display:inline; background:#ddf8ff;}
>
> > > </style>
>
> > > <div id="show"> show this content <button id="hideMe">hide me</
> > > button></div> <!-- show div ends-->
>
> > > <!--
> > > Next job to use php script instead of static text <div id="show">
>
> > > <?php
>
> > > $sql = SELECT * from test where id = i (javascript variable);
> > > // any idea how to achieve this? did anyone try?
>
> > > ?>
>
> > > <button id="hideMe">hide me</button></div> <!-- show div ends-->
>
> > > </div>
> > > -->
>
> > > <a href="#" id="123" onclick="setID(123)">How to write an
> > > Abstract</a> <a href="#" id="124" onclick="setID(124)">How to
> > > write an Abstract</
> > > a>- Hide quoted text -
>
> > - Show quoted text -
