jQuery: accordion on mouse over

JavaScript
1

I am trying to make an accordion working not on click but on mouse over. I changed the code shown below it was delegating on click to mouseover although it’s beeing triggered it doesn’t hide and show the section I’d like to hide/show. See here

Any idea ?

	REAL.accordion = function ()
{
	var accordion_trigger = $('.accordion-heading.accordionize');
	
	accordion_trigger.delegate('.accordion-toggle', 'mouseover', function (event) {
	  alert('mouseover')
	    if ($(this).hasClass('active')) {
	        $(this).removeClass('active');
	        $(this).addClass('inactive');
	    }
	    else {
	        accordion_trigger.find('.active').addClass('inactive');
	        accordion_trigger.find('.active').removeClass('active');
	        $(this).removeClass('inactive');
	        $(this).addClass('active');
	    }
	    event.preventDefault();
	});
}
3

What happens if you call it like this?

accordion_trigger.delegate('.accordion-toggle', 'mouseover', function (event, this)
4

900×167 40 KB

5

Will a mouseover bind help?

accordion_trigger.delegate('.accordion-toggle', 'mouseover', function (event) {
	  $(this).bind('mouseover');
	    if ($(this).hasClass('active')) {...
6

Also try hover function

accordion_trigger.delegate('.accordion-toggle', 'hover', function (event) {
	  $(this).bind('mouseover');
7

last but not least… found jqui on hover accordion whichll help

hit view source

8

Hi,

Something like this?

<!DOCTYPE HTML>
<html class="no-js">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <base href="http://www.agi.cl/">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /><link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="plugins/owl-carousel/css/owl.theme.css" rel="stylesheet" type="text/css" />
    <link href="colors/color10.css" rel="stylesheet" type="text/css" />
    <title>Busqueda de inversionistas</title>
  </head>
  <body>
    <div class="main" role="main">
      <div id="content" class="content full">
        <div class="container">
          <div class="page">
            <div class="row">
              <div class="col-md-9 col-sm-12">
                <div class="accordion" id="accordionArea">
                  <div class="accordion-group panel">
                    <div class="accordion-heading accordionize">
                      <a class="accordion-toggle active" data-toggle="collapse"
                      data-parent="#accordionArea" href="#oneArea">Busqueda de
                      inversionistas</a>
                    </div>

                    <div id="oneArea" class="accordion-body in collapse">
                      <div class="accordion-inner">
                        <h4><span style="color: #666699;">- Elaboraci&oacute;n del modelo
                        de negocios.</span></h4>

                        <h4><span style="color: #666699;">- B&uacute;squeda de
                        inversionistas , financistas o socios estrat&eacute;gicos para el
                        desarrollo de su proyecto.</span></h4>

                        <h4><span style="color: #666699;">- Roadshow y duediligence del
                        proyecto.</span></h4>
                      </div>
                    </div>
                  </div>

                  <div class="accordion-group panel">
                    <div class="accordion-heading accordionize">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent=
                      "#accordionArea" href="#twoArea">Adquisicion de terreno</a>
                    </div>

                    <div id="twoArea" class="accordion-body collapse">
                      <div class="accordion-inner">
                        <h4><span style="color: #666699;">- B&uacute;squeda de
                        emplazamientos estrat&eacute;gicos para el desarrollo de proyectos
                        inmobiliarios.</span></h4>

                        <h4><span style="color: #666699;">- Evaluaci&oacute;n
                        t&eacute;cnica del terreno.</span></h4>

                        <h4><span style="color: #666699;">- Estudio de normas
                        correspondientes a la zona, de acuerdo a OGUC, PRC y
                        CIP.</span></h4>

                        <p><br /></p>

                        <p><br /></p>
                      </div>
                    </div>
                  </div>

                  <div class="accordion-group panel">
                    <div class="accordion-heading accordionize">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent=
                      "#accordionArea" href="#threeArea">Creaci&oacute;n y
                      valorizaci&oacute;n de Proyectos</a>
                    </div>

                    <div id="threeArea" class="accordion-body collapse">
                      <div class="accordion-inner">
                        <h4><span style="color: #666699;">- Elaboraci&oacute;n de
                        Master-Plan.</span></h4>

                        <h4><span style="color: #666699;">- Planos de proyectistas y
                        especialidades, presupuesto de la obra, an&aacute;lisis de Precios
                        Unitarios, Carta Gantt, &nbsp; &nbsp;Organigrama, Plan de
                        Marketing, entre otros.</span></h4>

                        <h4><span style="color: #666699;">- Licitaci&oacute;n de contratos
                        de construcci&oacute;n.</span></h4>
                      </div>
                    </div>
                  </div>

                  <div class="accordion-group panel">
                    <div class="accordion-heading accordionize">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent=
                      "#accordionArea" href="#fourArea">Tasaciones</a>
                    </div>

                    <div id="fourArea" class="accordion-body collapse">
                      <div class="accordion-inner">
                        <h4><span style="color: #666699;">A llenar con texto desde el admin
                        A llenar con texto desde el admin A llenar con texto desde el admin
                        A llenar con texto desde el admin A llenar con texto desde el admin
                        A llenar con texto desde el admin A llenar con texto desde el admin
                        A llenar con texto desde el admin A llenar con texto desde el admin
                        A llenar con texto desde el admin A llenar con texto desde el admin
                        A llenar con texto desde el admin A llenar con texto desde el
                        admin</span></h4>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="js/jquery-2.0.0.min.js"></script> <!-- Jquery Library Call -->
    <script src="js/bootstrap.js"></script> <!-- UI -->
    <script>
      $(function() {
        $(document).on('mouseenter.collapse', '[data-toggle=collapse]', function(e) {
          var $this = $(this),
              href, target = $this.attr('data-target') || e.preventDefault() || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''),
              option = $(target).hasClass('in') ? 'hide' : "show";
          $('.panel-collapse').not(target).collapse("hide");
          $(target).collapse(option);
        })
      });
    </script>
  </body>
</html>
1 Like
9

Yes, thanks a lot Pullo !

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.