• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Infinity Pro: Use toggle on the widget areas ?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Infinity Pro: Use toggle on the widget areas ?

This topic is: not resolved

Tagged: Infinity Pro, toggle, widget area

  • This topic has 4 replies, 2 voices, and was last updated 6 years, 2 months ago by Boblebad.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 7, 2017 at 1:40 pm #202658
    Boblebad
    Participant

    Hi

    Just a thought. I need to make bunch of guide for how to use my site. I tried making a custom page with a sidebar menu, but it just looks to awful 😉

    So if i could do a toggle on the widget areas, then i could easily have the 15-20 guides i need.

    Why the problem ?

    Be course i need to use well sized pictures to show where and what to do. That'll be a very loooong page with everything open at once.

    Can this be easily done ?

    All the best
    Carsten

    March 7, 2017 at 6:35 pm #202673
    Victor Font
    Moderator

    You wouldn't toggle a widget. You toggle a div element with jQuery. You may be better off taking a look at this plugin: https://wordpress.org/plugins/jquery-collapse-o-matic/


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    March 8, 2017 at 5:34 am #202694
    Boblebad
    Participant

    Thank you for your reply Victor.

    I'm not sure why i need all that extra code and features, when i just need a toggle function 😉

    This here at Codepen looks fine: https://codepen.io/ArielBeninca/pen/KdVJGO

    I though have a problem with the accordions, they don't show up. Im not sure why it works on their site, be course the same CSS does not work on Infinity Pro. But it could also be be course the CSS is not complete. Komodo gives me errors on a couple of things, but i know it does not recognize webkit, so maybe there's more.

    But, at the beginning of the CSS i had to add an } that was missing. All toggles was wide open, so i believe that it needs more checking.

    March 8, 2017 at 7:43 am #202696
    Boblebad
    Participant

    I'm also trying to figure out the jQuery. I no nothing about it. I'm interested to see whether when one "guide" is clicked, if there's any other open, it will get closed.

    if( jQuery(".toggle .toggle-title").hasClass('active') ){
    		jQuery(".toggle .toggle-title.active").closest('.toggle').find('.toggle-inner').show();
    	}
    	jQuery(".toggle .toggle-title").click(function(){
    		if( jQuery(this).hasClass('active') ){
    			jQuery(this).removeClass("active").closest('.toggle').find('.toggle-inner').slideUp(200);
    		}
    		else{	jQuery(this).addClass("active").closest('.toggle').find('.toggle-inner').slideDown(200);
    		}
    	});
    March 9, 2017 at 11:04 am #202754
    Boblebad
    Participant

    For others who find this post and are looking for some ways to do this nice toggle thing. Here's a great site 😀

    He explains so many ways how you can do it. There's examples and code. Just put it in your template and put in your own text 🙂

    http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

    The third options fits me best:

    Javascript:

    $('.top').on('click', function() {
    	$parent_box = $(this).closest('.box');
    	$parent_box.siblings().find('.bottom').slideUp();
    	$parent_box.find('.bottom').slideToggle(1000, 'swing');
    });

    Html: ( you can put it in a text widget )

    <div class="container">
      <div class="box">
        <div class="top">
          click me
        </div>
        <div class="bottom">
          door #1
        </div>
      </div>
      <div class="box">
        <div class="top">
          click me
        </div>
        <div class="bottom">
          door #2
        </div>
      </div>
      <div class="box">
        <div class="top">
          click me
        </div>
        <div class="bottom">
          door #3
        </div>
      </div>
    </div>
    

    And the CSS:

    .container .box {
      float: left;
      width: 150px;
      margin: 20px;
    }
    
    .container .box .top {
      padding: 12px;
      background-color: blue;
      color: white;
      cursor: pointer;
    }
    
    .container .box .bottom {
      padding: 12px;
      background-color: red;
      color: white;
      display: none;
    }
    

    And of course, change the color or whatever you want to fit your needs.

    And, again, for the javascript, here's a way to do that: ( in the functions.php )

    /** Remove jQuery and jQuery-ui scripts loading from header */
    add_action('wp_enqueue_scripts', 'crunchify_script_remove_header');
    function crunchify_script_remove_header() {
          wp_deregister_script( 'jquery' );
          wp_deregister_script( 'jquery-ui' );
    }
     
    /** Load jQuery and jQuery-ui script just before closing Body tag */
    add_action('genesis_after_footer', 'crunchify_script_add_body');
    function crunchify_script_add_body() {
          wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', false, null);
          wp_enqueue_script( 'jquery');
          
          wp_register_script( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', false, null);
          wp_enqueue_script( 'jquery-ui');
    }

    You can of course call this crunchify_script_add_body what ever you want. Just remember to change both this and the add function. Works like a charm.

    Here's the link to the site: http://crunchify.com/genesis-framework-how-to-enqueue-scripts-and-css-into-child-theme/

    😀 😀 😀

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble