I've now got the divs sliding with this very simple code :
function divShowHide(divID, imgID){ // Hides/Shows the vehicle details
div and changes arrow appearance
var divToChange = document.getElementById(divID);
var arrowToChange = document.getElementById(imgID);
$(divToChange).slideToggle("slow")
}
As you can see I still haven't got the arrows to work. I obviously
need to toggle the src of the image as well as the slide movements for
the div. How can I do this???
Thanks,
James
On Oct 24, 8:56 am, James2008 <[EMAIL PROTECTED]> wrote:
> Hi again,
>
> Jonathan - I have tried that function in replace of my own and it
> doesn't seem to work :-s Any ideas?
>
> Thanks,
> James
>
> On Oct 23, 9:30 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
>
> > A more resilient solution is to use class names instead, you can't
> > just drop/ignore the IDs altogether:
>
> > <div class="title">Product 8234</div> (with background-image:
> > url(downarrow.gif) on CSS)
> > <div class="description">bla bla bla bla</div>
>
> > $('div.title').click(function(){
> > var arrow = ( $(this).next('.description').is(':visible') ) ?
> > 'url(downarrow.gif')' : 'url(uparrow.gif')';
> > $(this).css('backgroundImage',arrow);
> > $(this).next('.description').slideToggle();
>
> > });
>
> > - ricardo
>
> > On Oct 23, 1:31 pm, "Jonathan Sharp, Out West Media" <jquery-
>
> > [EMAIL PROTECTED]> wrote:
> > > Hi James,
>
> > > Here's one way to rewrite it using jQuery:
> > > function divShowHide(divID, imgID) {
> > > var d = $('#' + divID).toggle();
> > > $('#' + imageID).attr('src', 'Images/' + ( d.is(':visible') ?
> > > 'down' : 'up' ) + 'arrow.png' );
>
> > > }
>
> > > Cheers,
> > > -Jonathan
>
> > > On Oct 23, 2008, at 8:42 AM, James2008 wrote:
>
> > > > Hi. At the moment I've creating 2 divs for each record in a database.
> > > > One to first give a title for that piece of information and the second
> > > > to be a show/hide div that gives furthur information upon clicking a
> > > > little arrow. I generate both divs server side on an updatepanel
> > > > refresh. I have them showing/hiding at the moment using this
> > > > function...
>
> > > > function divShowHide(divID, imgID){ // Hides/Shows the second div and
> > > > changes arrow appearance
>
> > > > var divToChange = document.getElementById(divID);
>
> > > > if(divToChange.style.display == "block") {
> > > > divToChange.style.display = "none";
> > > > document.getElementById(imgID).src = "Images/downarrow.png";
> > > > }
> > > > else {
> > > > divToChange.style.display = "block";
> > > > document.getElementById(imgID).src = "Images/uparrow.png";
> > > > }
> > > > }
>
> > > > I was wandering if I could incorporate Jquery into this function to
> > > > make it do the job , or if all the divs have to be created in the head
> > > > section with jquery beforehand?? I have tried using the show/hide
> > > > commands in the above function using Jquery but they don't seem to
> > > > work. Each of my second divs have a unique ID, I just need to know if
> > > > it's possible to do it in this way?? All the examples on the site use
> > > > pre-defined names for divs but as I do not know the ammount of div
> > > > sets before so can't do that. They are all called "div2" + a unique
> > > > identifyier.
>
> > > > Any help would be greatly appreciated.
>
> > > > Thanks,
> > > > James
