Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Bootstrap accordions not closing when in seperate row

    After searching the web I couldn't find a solution to my problem. I have a page with 4 Bootstraps accordions within 4 rows.These rows are divided in 2 columns. An accordion in each row with an image. When I open the accordion, hidden images appear next to the text of the accordion through a javascript function.

    What I intend to achieve is when you click the accordion heading it opens and the images appear, clicking another accordion heading, the open accordion closes with the images and with the clicked accordion heading another set of images appear next to the text of the opened accordion under the image which is already there.

    The toggle funtion of bootstrap accordion doesn't seems to work when the other accordions are in a different rows with 2 spans and the data-parent is the same as the id. With different ids for the accordions it also doesn't work. I need to use this layout because of the images. I reckon it is a problem with the javascript and maybe bootstrap or me.

    I made a fiddle http://jsfiddle.net/SUpmn/ to show the problem. This page has only 2 rows.

    I have used different ids and data-parents, but then the accordions didn't close when they were opened. You had to click the accordion headings again to close them.

  • #2
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Moving thread

    Dear administrators
    Can this thread be moved to javascript and if so I like to rephrase my thread.
    Namely:
    I have a page with 4 rows and 2 cols, in each of this rows is a bootstrap accordion and an image which is in the other column. When the header is clicked the accordion opens(bootstrap collapse) and a hidden div with images is shown under the image already visible (slide jquery).

    So with one click 2 divs open(accordion body+hidden div), this works for all 4 accordions when I use different ids for the accordions, but they stay open.

    When I use the same id for the accordions for closing the accordion body I have problems.

    The jquery slide needs probably a noConflict and a click funtion(the onClick isn't the way to go I read somewhere) and another else statement.

    What I want is that it doesn't matter which header you click, only the clicked accordion opens + hidden div with images shown.

    Is there anybody out there.....who can help.

    A 2 row version of the page is here: http://jsfiddle.net/SUpmn/1/

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,081
    Thanks
    23
    Thanked 592 Times in 591 Posts
    What you want is not part of bootstrap, but it is a part of jquery. Use those functions instead.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Thanks for looking at it. I thought that nobody would have a look anymore. So my presumptions of a noConflict , click funtion and else statement are correct?

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,081
    Thanks
    23
    Thanked 592 Times in 591 Posts
    Sorry Dznr I did not read about you presumptions. Just read what you were trying to do and looked at the fiddle to verify and I know bootstrap doesn't do that without modifying the code.

    What you want to do is differently possible and has been code many time before. The nice thing about bootstrap is you can substitute your code for the accordion code with no conflicts.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    I had a look at the collapse code, but since I'm not a good coder I don't know where to start. My instinct said stay away from it, but if what I'm trying to do is easy to code into then I will try.
    Could you give some advice maybe?

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,912
    Thanks
    15
    Thanked 227 Times in 227 Posts
    What you need to do is write a javascript function with a for loop that loops over all the accordions and closes them, than, after the loop runs, the function opens the one you want opened. Very simple, been there done that.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #8
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    I want the shown divs to close together with the accordions.
    The accordion and the hidden div is shown when I click on the accordion header,then when I click another header the open divs(accordion body and shown div) should close.
    Is this possible with your suggestion, because you talk about the accordions only and isn't the each() method faster then the for loop?

  • #9
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,912
    Thanks
    15
    Thanked 227 Times in 227 Posts
    Quote Originally Posted by Dznr View Post
    I want the shown divs to close together with the accordions.
    The accordion and the hidden div is shown when I click on the accordion header,then when I click another header the open divs(accordion body and shown div) should close.
    Is this possible with your suggestion, because you talk about the accordions only and isn't the each() method faster then the for loop?
    I don't know why you couldn't. But not seeing your code and being not well acquainted with jQuery, I can't tell you how to do it. As far as the speed is concerned, unless you have 100 items to deal with it will be negligible. A lot of times jQuery introduces its own time delays.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #10
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    This is the code I want to adapt
    Code:
    function slide(slides) {
         $('.slidepic').each(function(index) {
              if ($(this).attr("id") == slides) {
                   $(this).slideDown(100);
              }
              else {
                   $(this).slideUp(100);
              }
         });
    }

  • #11
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,081
    Thanks
    23
    Thanked 592 Times in 591 Posts
    No The first thing you want to do is to close every accordion and then open the one you want. The close of all accordions can be a function called at the start of the slidedown function.
    Last edited by sunfighter; 10-08-2013 at 01:27 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #12
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    This is the code I use for showing and closing the hidden divs and not the accordion(collapse.js)

  • #13
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,081
    Thanks
    23
    Thanked 592 Times in 591 Posts
    Ok, guess you swapped subjects and I didn't see that.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #14
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    What you want to do is differently possible and has been code many time before.
    I have been searching the web and I didn't find anything that resembles what I want to do.
    What came closest was removeClass/ addClass, but I could find a way to combine it with the slide up/down Jquery.


  •  

    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
    •