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

8/22/2022 - Mon
APoPhySpt

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

cheers
ASKER
coolispaul

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
APoPhySpt

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

Your help has saved me hundreds of hours of internet surfing.
fblack61
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

ASKER
coolispaul

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
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
COBOLdinosaur

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&
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.