Avatar of coolispaul
coolispaulFlag for United States of America

asked on 

Jquery slide down within a group

Hi

I have 4 buttons that when clicked reveal the appropriate div eleemnt

Here is my example:
http://dev.openwaterdesign.com/

I want to toggle the "+" symbols and obviously the div
I cant get it to work as it should - any ideas?

Jquery is:
$(".template1 .icon-reveal").click(function() {
  $el = $(this).attr('class').split(' ')[1];
  $(this).addClass("active");
 
   
  $(".plus").each(function() {
    if($(this).html()=="-") {
      $(".plus").html("+");
    }
  });
  $("#"+$el).slideToggle();

  if($(this).children(".plus").html()=="+") {
    $(this).children(".plus").html("-");
  } else {
    $(this).children(".plus").html("+");
  }


});
jQueryHTMLJavaScript

Avatar of undefined
Last Comment
COBOLdinosaur
Avatar of APoPhySpt
APoPhySpt
Flag of Portugal image

I did not completelly understand what it is you are trying to achieve, could you give any more examples or further explain?

cheers
Avatar of coolispaul
coolispaul
Flag of United States of America image

ASKER

the 4 big buttons  with the plus symbols, when clicked reveal content

(the first 2 work...)

so content slides down. When clicked again i want it to slide up. If another button is clicked i want all to reset and the clicked one to reveal appropriate content..

Thanks
Avatar of APoPhySpt
APoPhySpt
Flag of Portugal image

well, I wrote this on notepadd++ so I did not have a chance to test it, but I think it should be something along the lines of:

<script>

function hideAll()
{
	-- $('#' + revealed1).slideUp(0);
	-- $('#' + revealed2).slideUp(0);
	-- $('#' + revealed3).slideUp(0);
	-- $('#' + revealed4).slideUp(0);

	$(".revealed").each(function() {
		$(this).slideUp(0);
	});
}

function toogleContainer(container)
{
	-- get the current text of the container '-' or '+'
	var text = $('.' + container).html();
	
	if(text == '-')
	{
		$('#' + container).slideUp(300);
		$('.' + container).html('+');
	}	
	else if(text == '+')
	{
		hideAll();
		
		$('#' + container).slideDown(300);
		$('.' + container).html('-');
	}		
}

$(document).ready(function () {
    
    $("#revealed1").on("click", function () {
        toogleContainer('revealed1');
    });
	
	$("#revealed2").on("click", function () {
        toogleContainer('revealed2');
    });
	
	$("#revealed3").on("click", function () {
        toogleContainer('revealed3');
    });
	
	$("#revealed4").on("click", function () {
        toogleContainer('revealed4');
    });

});

</script>

Open in new window

Avatar of Julian Hansen
Ok first up your 3rd and 4th panels don't work because they have the same id as the second panel

Secondly - I would change your markup of your <a> to this

  <a class="icon-reveal" data-id="revealed1">I'm New Here<br/><span class="plus">+</span></a>
  <a class="icon-reveal greenicon" data-id="revealed2">Who We Are<br/><span class="plus">+</span></a>
  <a class="icon-reveal redicon" data-id="revealed3">Get Involved<br/><span class="plus">+</span></a>
  <a class="icon-reveal orangeicon" data-id="revealed4" style="margin-right:0">Together: Medway &amp; Beyond<br/><span class="plus">+</span></a>

Open in new window

The main difference is the use of the HTML5 custom data attribute - in this case I have called it id (data-id) and put the id of the corresponding panel that must slide when that <a> is clicked.

Finally the JQuery
<script type="text/javascript">
$(function() {
    $('a.icon-reveal').click(function(e) {
        //
        // prevent default click behaviour on the <a>
        //

        e.preventDefault();

        //
        // check if the panel is already open - if it is
        // then it will be closed in the following loop
        // and the final open code can be skipped
        //

        var open = $(this).hasClass('open');


        //
        // for each open panel (should only be 1) but
        // will find open panels that are not linked to the
        // <a> clicked. We find open panels by the 'open'
        // class that is assigned to the element when the panel
        // is opened
        //

        $('a.icon-reveal.open').each(function () {
 
            //
            // Find the <span> and set the html to a '+'
            // we know it is a '+' because we are closing 
            // panels in this loop
            //

            $(this).find('span').html('+');

           
            //
            // Slide the corresponding panel up as part
            // of the close. Instead of parsing the class
            // we get the id straight from the data-id attribute
            // using the JQuery .data() method
            //

 
            $('#' + $(this).data('id')).slideUp();

            //
            // Remove the 'open' class we use to identify open
            // panels
            //

            $(this).removeClass('open');
        });

        //
        // Now, if we are opening the panel i.e. if it was closed
        // when clicked then ....
        // 

        if (!open) {

            // 
            // Add the open class to mark it as open
            // Change the html to a minus sign
            //

            $(this).addClass('open').find('span').html('-');

            //
            // And finally open the corresponding panel
            // using the data-id attribute to find the correct
            // panel
            //

            $('#' + $(this).data('id')).slideDown();
        }
    });
});
</script> 

Open in new window


Don't forget to fix the id's on your <div>'s
  <div class="revealed" id="revealed1">
    <h2>I'm New Here</h2>
  </div>

  <div class="revealed" id="revealed2">
    <h2>Who We Are</h2>
  </div>

  <div class="revealed" id="revealed3">
    <h2>Get Involved</h2>
  </div>

  <div class="revealed" id="revealed4">
    <h2>Together</h2>
  </div>

Open in new window

Avatar of coolispaul
coolispaul
Flag of United States of America image

ASKER

thanks julianH that works great and thanks for explaining how it works - all understood.

just one thing, when you have one already open and you click another you kind of get o flicking (obviously because there is a slide up and slide down at same time) - would a fade work better in this scenario and how could this be done?

Thanks
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
If you want it to work reliably, you probably want to validate  and fix the errors, plus I suggest you do not use label that way. It has a very narrow and specific use.

The way you are using it could break a page if a future browser release does not recognize it in an invalid context.

Cd&
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo