CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Emmanuel Henri
Emmanuel Henri

Reputation: 163

Hide/show block with CSS

A previous developer built a webpage with a woman and numbers on it to click for to show services related to a bodypart. You can see the current page here...

http://dermanaissance.com/nos-solutions/

My issue here is that he built the solution with CSS VS using JS or Jquery. I'm trying to hide the other blocks when a specific block has been clicked using what he's already done but am afraid isn't possible only using CSS.

I'm not quite sure how to tackle this one without using Jquery as this is usually how I would approach this, any ideas?

This is the code right now...

<div id="anchor-1" class="nos-anchor">1
    <span class="nos-block">
        <span class="nos-line">&nbsp;</span>
        <ul>
            <li><a href="/lift-sans-chirurgie/">Lift Sans Chirurgie</a></li>
            <li><a href="/attenuation-des-rides/">Atténuation des Rides</a></li>
            <li><a href="/contour-des-yeux/">Contour des Yeux</a></li>
            <li><a href="/double-menton/">Double-menton</a></li>
            <li><a href="/bajoues/">Bajoues</a></li>
            <li><a href="/relachement-du-cou/">Relâchement du Cou</a></li>
            <li><a href="/ouverture-du-regard/">Ouverture du Regard</a></li>
            <li><a href="/augmentation-du-volume/">Augmentation du Volume</a></li>
            <li><a href="/amelioration-du-teint-de-la-peau/">Amélioration du Teint de la Peau</a></li>
            <li><a href="/acne-actif/">Acné Active</a></li>
            <li><a href="/cicatrice-dacne/">Cicatrices d’Acné</a></li>
            <li><a href="/decollete/">Décolleté</a></li>
            <li><a href="/attenuation-des-cicatrices/">Atténuation des Cicatrices</a></li>
            <li><a href="/photorajeunissement/">Photorajeunissement</a></li>
            <li><a href="/taches-pigmentaires-et-melasma/">
Taches pigmentaires et Mélasma</a></li>
            <li><a href="/couperose-et-rosacee/">Couperose et Rosacée</a></li>
            <li><a href="/varicosites/">Varicosités</a></li>
        </ul>
    </span>
</div>

and the CSS that makes this solution work...

.page-id-9 #main-content .nos-anchor {
position: absolute;
display: block;
z-index: 9;}

.page-id-9 #main-content .nos-anchor .nos-block {
position: absolute;
display: none;}

.page-id-9 #main-content .nos-anchor .nos-block a {
display: block;}

.page-id-9 #main-content .nos-anchor .nos-line {
display: block;
position: absolute;
top: 20px;}

Upvotes: 0

Views: 257

Answers (3)

gregdevs
gregdevs

Reputation: 713

Having looked at your page, you could apply something like this. You'll have to use pure Javascript or Jquery. Since you mentioned JQuery as your preference:

html

<div>
    <div class="pill">1</div>
</div>
<div>
    <div class="pill">2</div>
</div>

js

$('.pill').click(function(){
    $(this).toggleClass('active')

    if ($(this).hasClass('active')){
     $('.pill').not(this).fadeOut(200)
   }else{
     $('.pill').not(this).fadeIn(200)
   }

});

The idea here is to use Jquery's toggleClass method and to check whether the click element has the active class, and if it does hide the other elements. This should steer you in the right direction

Fiddle

Upvotes: 1

Benneb10
Benneb10

Reputation: 1489

If you want a pure CSS solution I suggest looking into the Target psuedo element, otherwise -

Here is a pure javascript solution. Just give the divs you are hiding and showing an ID, and call them with the clickable object using onclick="hideShow(sectionID);" 

<div style="height:40px; width:40px; background:red;" onclick="hideShow('div1')">
  <div id="div1" style="display:none; background:orange; width:15px; height:15px;"></div>
</div>
<div style="width:40px; height:40px; background:yellow;" onclick="hideShow('div2')">
  <div id="div2" style="display:none; background:green; width:15px; height:15px;"></div>
  <div></div>
</div>
<div style="width:40px; height:40px; background:blue;" onclick="hideShow('div3')">
  <div id="div3" style="display:none; background:purple; width:15px; height:15px;"></div>
  <div></div>
</div>

var currrentElementShowing;

function hideShow(sectionID) {
  if (document.getElementById(sectionID) != currrentElementShowing) {
    document.getElementById(sectionID).style.display = "block";
    if (currrentElementShowing != undefined) {
      currrentElementShowing.style.display = "none";
    }
    currrentElementShowing = document.getElementById(sectionID);
  } else {

  }
}

https://jsfiddle.net/cxjndqzu/

Upvotes: 1

Stan Shaw
Stan Shaw

Reputation: 3034

Wow "page-id-9" is pretty terrible naming convention (I know you didn't do it, but MAN!).

So, what I would do is create two CSS classes:

  • "ToggleClass"
  • "Active"

You would assign "ToggleClass" to all of your list items. Using CSS, you make "ToggleClass" items that ALSO have the "Active" class display how you would like. "ToggleClass" items WITHOUT the "Active" class would be hidden as you would like.

Then, using jQuery (sorry, but I think it has to be done), make the following function:

$(document).ready(function(){
    $(".ToggleClass").on("click", function(){
        $(".ToggleClass").removeClass("Active");
        $(this).addClass("Active");
    });
});

This event will fire anytime someone clicks a "ToggleClass" element. First, it removes the "Active" class from ALL elements that have "ToggleClass" (this ensures that you won't simultaneously have two elements with the "Active" class). Next, it adds the "Active" class to the element that was clicked.

Leave a comment and let me know how this works for you - Good luck!

Upvotes: 1

Related Questions