Collapsing/Expanding link on click

StackOverflow https://stackoverflow.com/questions/18122899

Pregunta

I'm stuck with a folding menu here.

I managed to get my hands on a script that does exactly what I want but in kind of reverse. In the script the link is "Expanded" by default. I want my link to be contracted by default and when you click it, it expands.

Any help would be really appreciated! Thanks :) 

.show {
  display: none;
}

.hide:focus + .show {
  display: inline;
}

.hide:focus {
  display: none;
}

.hide:focus ~ #list {
  display: none;
  list-style-type:none;
}

@media print {
  .hide, .show {
    display: none;
  }
}
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
  </head>
  <body>

    <p>Lorem ipsum...</p>
    <div>
      <a href="#" class="hide">[Link]</a>
      <a href="#" class="show">[Link]</a>
      <ol id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ol>
    </div>

  </body>
</html>

¿Fue útil?

Solución

Just invert the css:

CSS:

#list, .show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:block; }

Otros consejos

I hope i understood you right. I usually use jquery for this... Here is a little demo: http://cssdeck.com/labs/omya4ax9 HTML:

<a href="#" class="hide" data-toggle="#list">Toggle: show</a>
<ol id="list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ol>

CSS:

#list {
  display: none;
}

#list.open {
  display: block;  
}

JS:

$('[data-toggle]').on('click', function(){
  var id = $(this).data("toggle"),
      $object = $(id),
      className = "open";

  if ($object) {
    if ($object.hasClass(className)) {
      $object.removeClass(className)
      $(this).text("Toggle: show");
    } else {
      $object.addClass(className)
      $(this).text("Toggle: hide");
    }
  }
});

TJL

You might want to give a look at this simple Javascript solution.

A method can be invoked when clicking on some component to make a specific element toggle between visible or collapsed mode.

A Javascript example:

function toggle(elementId) {
    var ele = document.getElementById(elementId);
    if(ele.style.display == "block") {
        ele.style.display = "none";
    }
    else {
        ele.style.display = "block";
    }
}

You can invoke the method into href or onclick event.

Original post: snip2code - How to collapse a div in html

In case anyone is still looking, here is a simple jQuery code to expand and collapse anything, so long as you get your element selection correct in the variable declaration.

I changed your id="list" to class="list". This way the code is available to more than one ordered list. You can leave it as an id, but just know you will need to write a separate script for each of those elements.

<ol class="list">
    <li>
        <span class="menu glyphicon glyphicon-menu-down">&nbsp;MENU</span>
        <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
            <li>Menu Item 4</li>
        </ul>
    </li>
</ol>

<script>
    var $menu = $('ol.list li span.menu');
    $menu.next().hide();
    $menu.on('click', function () {
        $(this).toggleClass('glyphicon-menu-up glyphicon-menu-down').next().slideToggle();
    })
</script>
  1. In the above script code, I've declared and initialized the variable I'm using which points to any element containing an ordered list with a class of list, but I've drilled down into that element to reach the span and actual menu.
  2. When the page loads, the menu is automatically collapsed. If you want to have it show when the page loads, you will need to removed the $menu.next().hide() line. You will also need to flip the classes in the on click function that appear in .toggleClass().
  3. Then I use the variables onClick function to open or expand the ordered list you've clicked on.
  4. At the same time, I'm toggling the class to show an up or down chevron depending on the state of the menu - expanded or collapsed respectively.

If you wanted to expand or collapse the menu when the mouse is hovered over it; you would need to change the script to this:

<script>
    var $menu = $('ol.list li span.menu');
    $menu.next().hide();

    $menu.on('mouseover mouseout', function () {
        $(this).toggleClass('glyphicon-menu-up glyphicon-menu-down').next().slideToggle();
    })
</script>

It's pretty simple and straight forward and you can use it anywhere where you want to show & hide content. And as you can see, it takes less code and you don't need to mess with CSS unless you want to style the look of your menu.

Try it out! I hope this helps someone.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top