Infinity Pro: Use toggle on the widget areas ?

[BoblebadParticipant]

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

[Victor FontModerator]

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?

[BoblebadParticipant]

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.

[BoblebadParticipant]

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);
		}
	});

[BoblebadParticipant]

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