Quantcast
Channel: General developer forum
Viewing all articles
Browse latest Browse all 37670

Re: How do I make the entire Block's title clickable (to make it show and hide the block)

$
0
0
by Andrew Nicols.  

It should be possible to do this across a theme rather than on an individual block relatively easily.

I would imagine that the easiest way would be to loop on the .block_with_controls selector and build up the new header based on the existing one, alternatively you could  add an eventhandler to the .block_with_controls h2 as follows:

M.theme_nadav = M.theme_nadav || {};
M.theme_nadav.add_block_toggles = function() {
  Y.delegate('click', M.theme_nadav.toggle_visibility, 'body', 'div.block_with_controls h2');
};
M.theme_nadav.toggle_visibility = function(event) {
  var targetBlock, some, other, variables;
  // Get the block
  targetBlock = event.target.ancestor('.block', true);
  // Do some work here
  targetBlock.toggleClass('invisible');
};
}

You could then hide the show/hide icon with some CSS:

.jsenabled .block_with_controls img.editing_show,
.jsenabled .block_with_controls img.editing_hide {
  display: none;
}

And add an appropriate mouse-over icon etc with more CSS

Just to warn you though, we were looking at adding show/hide functionality as an AJAX option, but encountered some issues because the block contents is only generated as HTML on the page if the block is visible when the page is loaded. We could only find really hacky ways to generate the block contents through AJAX so put it on the back burner for when we had more time.

Andrew


Viewing all articles
Browse latest Browse all 37670

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>