www.webdeveloper.com
Results 1 to 8 of 8

Thread: .each .slideToggle issues

  1. #1
    Join Date
    Mar 2010
    Posts
    4

    .each .slideToggle issues

    Hey, I'm pretty new to Javascript so Im betting this problem is something really basic.
    Ive got a page within a Joomla site with loads of banners for the users to click, then the answer slides down and it changes the background. I have managed to get the first header to do this, but if i click on any other banner further down the list it just activates the first one. What am I doing wrong? I have tried to use the .each function with the (this) selector but I just cant get it to work
    Below is the script I have used;

    p.s. I am using jQuery in no conflict mode as follows;
    Code:
    var $j = jQuery.noConflict();
    Java;
    Code:
    <script type="text/javascript">
        $j(document).ready(function() {
            $j(".clickme").each(function () {
                $j(this).click(function() {
                $j('#book').slideToggle();
                $j('.clickme').toggleClass('clickedme');
                });
            });     
        });
    </script>
    Here is an example of the HTML
    HTML Code:
    <h2 class="clickme">Report it</h2>
    <div style="display:none;" id="book">
    <p>If you are worried about something that is happening to you online,  you can report it here. <a href="http://www.ceop.police.uk/reportabuse/index.asp">CEOP report</a></p>
    </div>

  2. #2
    Join Date
    May 2007
    Posts
    105
    There can only be one ID on a page.
    Code:
    $j('#book').slideToggle();
    That code is doing the slide toggle to #book. If there are multiple with the same ID, it probably does it to the first one. Just a guess.
    Mike

  3. #3
    Join Date
    Mar 2010
    Posts
    4
    Yeh, I was thinking of trying another selector for the slideToggle, maybe a div:first or something. Will try it in a bit but cant think how to fix the problem of it only doing the first banner. I can put the page somewhere if it would help anyone to help me?

  4. #4
    Join Date
    May 2007
    Posts
    105
    Yeah, it would help a lot to see your site.
    Mike

  5. #5
    Join Date
    Mar 2010
    Posts
    4
    Ive had to copy it out to my testing site, so apoligies for the dia design.
    if you go to http://www.swiggums.co.uk, its the first list of questions. Its fairly obvious where the problems are.

  6. #6
    Join Date
    Mar 2010
    Posts
    4

    Fixed

    Fixed it. I used the .next() command, never heard of it before. It (fairly obviously) allows you to look for the next thing you describe in the (). Below is the code I used;
    Code:
    <script type="text/javascript">
        $j(document).ready(function() {
            var question = $j('.clickme')
                question.click(function() {
                $j(this).toggleClass('clickedme');
            $j(this).next('div #book').slideToggle();
        });     
        });
    </script>

  7. #7
    Join Date
    Jun 2017
    Location
    Florida
    Posts
    3
    You don't need to add .each() method here. If you see the definition of the jQuery Each method here, you will find that it is used to iterated over the selection of element.
    Here you have to only select the items which are banners. Give these banners some css class like '.myBanners' and then simply do.
    $j('myBanners').slideToggle();

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,859
    Please note that JQuery questions goes in the JavaScript Frameworks forum which is where frameworks, libraries, widgets and other add in tools go.

    *moved*
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.18834 seconds
  • Memory Usage 2,913KB
  • Queries Executed 13 (?)
More Information
Template Usage (35):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (4)bbcode_code
  • (1)bbcode_html
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (8)memberaction_dropdown
  • (1)navbar
  • (5)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (8)postbit
  • (8)postbit_onlinestatus
  • (8)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates