Using IDs with the solution I proposed above should work:
function divShowHide(divID, imgID){
var $divToShow = $('#'+divID);
var arrowURL = $divToShow.is(':visible') ? 'downarrow.gif'' :
'uparrow.gif'';
// the above is the same as: if ($divToShow.is(':visible')) { arrow
= 'downarrow.gif } else { arrow = 'uparrow.gif' };
$divToShow.slideToggle("slow");
$('#'+imgID).attr('src',arrowURL);
}
On Oct 24, 8:50 am, James2008 <[EMAIL PROTECTED]> wrote:
> 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
