Reputation: 41
EDITED MAY, 26TH:
I'm using the coding you'll see below as an answer from @AchrafJEDAY (I'll also include it here as well). The coding as broke somehow, and when I click on the date or tag buttons to show the date or tag for ANY post, it freaks out; you see it for just a moment before the whole page refreshes with "/?" at the end of the URL and the date and tags are both hidden again. I'm not sure why this is, but I'd SUPER appreciate ANY help anyone has! Thank you!!
CODING:
CSS
.postdatebutton{
float:left;
position:relative;
top:0px;
left:0px;
width:50px;
height:15px;
border:1px #83174C solid;
background-color:rgba(255, 230, 240, 0.8);
font-family: 'Indie Flower', cursive;
letter-spacing:2px;
text-align:center;
padding-top:5px;
color:black;
font-size:14px;
text-decoration:underline;
}
.postdatebutton button{
font-family: 'Indie Flower', cursive;
text-decoration:underline;
}
.postdate{
width: 100%;
text-align: center;
display:none;
}
/*TAGS*/
.tags {
width:415px;
text-transform:uppercase;
line-height:120%;
font-size:15px;
text-align:center;
padding:2px;
text-decoration:underline;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}
.tags a {
color:#BB0B20;
letter-spacing:1px;
padding:1px;
}
.posttagbutton{
float:left;
position:relative;
top:0px;
left:0px;
width:50px;
height:15px;
border:1px #83174C solid;
background-color:rgba(255, 230, 240, 0.8);
font-family: 'Indie Flower', cursive;
letter-spacing:2px;
text-align:center;
padding-top:5px;
color:black;
font-size:14px;
text-decoration:underline;
}
.posttagbutton button{
font-family: 'Indie Flower', cursive;
text-decoration:underline;
}
.posttag {
width: 100%;
text-align: center;
display:none;
}
#stuff table{
position:relative;
width:100%;
text-align:center;
}
HTML
<table>
<tbody>
<tr>
<!---LIKE---->
<td><div class="postlike">{LikeButton}</div> </td>
<!---REBLOG---->
<td><div id="postreblog"><a href="{ReblogURL}">Reblog</a></div> </td>
<!---NOTES---->
<td><div class="postnote">{block:NoteCount} <a href="{Permalink}">Notes</a>{/block:NoteCount}</div> </td>
<!---VIA---->
<td><div class="postfrom">{block:RebloggedFrom}<a href="{ReblogParentURL}">From</a>{/block:RebloggedFrom}</div> </td>
<!---SOURCE---->
<td><div class="postsource"> {block:ContentSource}<a href="{SourceURL}">Orig-Poster</a>{/block:ContentSource}</div> </td>
<!---DATE BUTTON---->
<td><div class="postdatebutton"><button onclick="myFunction6(this)">Date</button></div></td>
<!---TAGS BUTTON---->
<td><div class="posttagbutton"><button onclick="myFunction7(this)">Tags</button></div></td></tr></tbody></table>
<!---HIDDEN DATE---->
<div class="postdate" style="display:none;"><p>{block:Date}<a href="{Permalink}"> {MonthNumberWithZero}-{DayOfMonthWithZero} {24Hour}:{Minutes}</a>{/block:Date}</p></div>
<!---HIDDEN TAGS---->
<div class="posttag" style="display:none;"><div class="tags"><p>{block:Tags}<a href="{TagURL}"># {Tag}</a>{/block:Tags}</p></div></div>
JS
<!---SCRIPT FOR DATE AND TAGS---->
<script>
function myFunction6 ( event ) {
var node = event.parentNode;
for (i = 0; i < 5; i++) {
node = node.parentNode;
}
var x = node.getElementsByClassName("postdate");
if (x[0].style.display === 'block') {
x[0].style["display"] = "none";
}
else {
x[0].style["display"] = "block";
}
}
</script>
<script>
function myFunction7( event ) {
var node = event.parentNode;
for (i = 0; i < 5; i++) {
node = node.parentNode;
}
var x = node.getElementsByClassName("posttag");
if (x[0].style.display === 'block') {
x[0].style.display = 'none';
}
else {
x[0].style.display = 'block';
}
}
</script>
Upvotes: 0
Views: 330
Reputation: 2104
function myFunction1 ( event ) {
var node = event.parentNode;
for (i = 0; i < 5; i++) {
node = node.parentNode;
}
var x = node.getElementsByClassName("postdate");
if (x[0].style.display === 'block') {
x[0].style["display"] = "none";
}
else {
x[0].style["display"] = "block";
}
}
function myFunction2( event ) {
var node = event.parentNode;
for (i = 0; i < 5; i++) {
node = node.parentNode;
}
var x = node.getElementsByClassName("posttag");
if (x[0].style.display === 'block') {
x[0].style.display = 'none';
}
else {
x[0].style.display = 'block';
}
}
<div id="stuff"><div class="picsize"><div class="textpost"><h3> Testing Text Post - Title </h3><p><span><a href="http://allystestblog1818.tumblr.com/post/159609010143">allystestblog1818</a></span>:</p><blockquote><h2>Headline</h2><h2><b>Headline Bold</b></h2><h2><i>Headline Italic</i></h2><p><b>Bold text,</b> <i>Italic text,</i> <span><a href="http://allystestblog1818.tumblr.com/">Link text</a></span></p><ol><li>Numbered <br></li><li>List<br></li></ol><ul><li>Bullet<br></li><li>List<br></li></ul><blockquote><p>Indented text</p></blockquote><p>Regular text</p><p>Line break<br></p><hr><p>Picture</p><figure class="tmblr-full"><img src="https://68.media.tumblr.com/1250d273b9e9b4860d73aa893361ec20/tumblr_inline_oogr5xEk1J1txz9li_540.jpg" class=""></figure><p class=""><span><a href="http://allystestblog1818.tumblr.com/post/159609010143/testing-text-post-title" class="tmblr-truncated-link read_more">Keep reading</a></span></p></blockquote></div></div><div class="picsize"></div><p></p><table><tbody><tr><td><div class="postlike"><div class="like_button" data-post-id="160506016653" data-blog-name="wisdomsprydethemetestblog" id="like_button_160506016653"><iframe id="like_iframe_160506016653" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=wisdomsprydethemetestblog&post_id=160506016653&color=black&rk=4ktb4Bma&root_id=159609010143" scrolling="no" width="20" height="20" frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_160506016653"></iframe></div></div> </td><td><div id="postreblog"><a href="https://www.tumblr.com/reblog/160506016653/4ktb4Bma">Reblog</a></div> </td><td><div class="postnote"> <a href="https://wisdomsprydethemetestblog.tumblr.com/post/160506016653/testing-text-post-title">Notes</a></div> </td><td><div class="postfrom"><a href="https://pokemonthemetestblog.tumblr.com/post/159612507917/testing-text-post-title">From</a></div> </td><td><div class="postsource"> <a href="http://allystestblog1818.tumblr.com/post/159609010143/testing-text-post-title">Orig-Poster</a></div> </td><td><div class="postdatebutton"><button onclick="myFunction1(this)">Date</button></div></td><td><div class="posttagbutton"><button onclick="myFunction2(this)">Tags</button></div></td></tr></tbody></table><div class="postdate" style="display:none;"><p><a href="https://wisdomsprydethemetestblog.tumblr.com/post/160506016653/testing-text-post-title">05-10 1:52</a></p></div><div class="posttag" style="display:none;"><div class="tags"><p><a href="https://wisdomsprydethemetestblog.tumblr.com/tagged/Test-text-post"># Test text post</a><a href="https://wisdomsprydethemetestblog.tumblr.com/tagged/tags-tags-tags"># tags tags tags</a></p></div></div>
</div>
Upvotes: 1