Click to show (PHP or CSS)

HTML & CSS
1

Hey guys,
I’m trying to create something similar to the example picture below. Basically when clicked the cover will remove and the name below will be shown.

I’ve managed to get everything to look like the picture. But I can’t get the reveal or remove cover part to work when it’s clicked. Below is my unaltered code - I’m not sure if it’s the DIV/CSS or PHP portion that need the tweaking. I hope someone here can help me out.

The Div


<div class="crux">
<div class="cover">Click to show name</div>
<div class="label">&nbsp;</div>
<strong id="person_name_<?php echo $name["NameID"] ?>"><?php echo $name["Name"] ?></strong>

<script language="javascript">
set_copy_command ( "<?php echo $name["Name"] ?>" , "person_name_<?php echo $name["NameID"] ?>" , <?php echo $name["NameID"] ?> ) ;
</script>
</div>

The CSS


.crux {
    background: none repeat scroll 0 0 #FFFDD9;
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;
    clear: both;
    color: #000000;
    float: left;
    font-size: 16px;
    height: 19px;
    margin: 0 0 8px;
    overflow: hidden;
    padding: 2px 5px;
    position: relative;
    width: 148px;
}
.crux .label {
    color: #CCCCCC;
    display: none;
    text-transform: uppercase;
}
.codelabel {
    display: none;
}
.crux:hover .cover, .crux.hover .cover, .crux .cover.hover {
    padding-right: 0;
}

.revealed {
    float: left;
    width: auto;
}
.revealed .cover {
    display: none;
}
.revealed .label {
    color: #666666;
    display: inline;
    margin-right: 6px;
}
.revealed .code {
    display: inline;
    position: relative;
}
.cover {
    background: -moz-linear-gradient(center top , #16A7D2, #0492BD) repeat scroll 0 0 transparent;
    border-bottom: 1px solid #026886;
    border-radius: 6px 0 0 6px;
    color: #FFFFFF;
    font-size: 14px;
    left: 0;
    line-height: 16px;
    padding: 4px 6px 3px;
    position: absolute;
    text-align: center;
    top: 0;
    z-index: 20;
}
a.cover {
    text-decoration: none;
}
a.cover:visited {
    color: #FFFFFF;
}
.cover:after {
    background: url("sprite.png") no-repeat scroll 1px -476px transparent;
    content: "";
    cursor: pointer;
    height: 26px;
    position: absolute;
    right: -22px;
    top: -1px;
    width: 23px;
}
.code
{
	font-weight:700;
	height:19px;
	overflow:hidden;
	position:absolute;
	right:5px;
	text-align:right;
	z-index:10;
}
2

Any type of user interaction like clicks should be done with javascript.
It’s best practice to keep all javascript completely separate to the HTML(in it’s own .js file) and far from the server-side PHP.

But, in this case because it’s such a simple action you might be able to get away with a small bit of inline script.

<div class="crux">
<div class="cover" onclick="this.style.display='none';">Click to show name</div>
<div class="label">&nbsp;</div>
<strong id="person_name_<?php echo $name["NameID"] ?>"><?php echo $name["Name"] ?></strong>
3

Hi Mark,
Thanks for stopping by, for some reason the onclick trick did not work. I had a look at another site with a similar ‘Click to show’ ribbon in place. The CSS there looks like this;


Normal state

<div class="crux attachFlash">
<div class="cover">Click to show name</div>
<div class="label">&nbsp;</div>
<div class="code">John Doe</div>
</div>



When clicked

<div class="crux revealed">
<div class="cover">Click to show name</div>
<div class="label">&nbsp;</div>
<div class="name">John Doe</div>
</div>

I how can I have the revealed css class in the same class as the crux when it is clicked?

4

Hmm, I’m surprised that the onclick didn’t work, it should hide the element when you click on it.
Can you post the link to a page or post the entire html / css of the page? It must be something else going on.

Yes, often that sort of toggling visibility is done by toggling a class on a wrapper element, it just requires more code than what I gave you.


<div class="crux">
  <div class="cover">Click to show name</div>
  <div class="label">&nbsp;</div>
  <div class="name">John Doe</div>
</div>



.crux .cover { display: block }
.crux.revealed .cover { display: none }

Using jQuery here’s a simple script that should toggle the revealed class on the wrapper.


$('.crux .cover').click(function() {
  $(this).closest('.crux').addClass('revealed');
})

That listens for click events on the .cover element and then finds the closest parent with class=“crux” and adds the class.

5

Hi Mark, I’ve sent you a PM with a link to the site.