This question already has answers here:
Is h1 tag that's hidden using display:none given prominence by search engines?
(10 answers)
Closed 9 years ago.
Here are basic example boxes, CSS and JS I created for jQuery Modal Box.
<!-- hidden boxes // -->
<div id="content_1" class="box">
<h1>First Box</h1>
<p>Content goes here...</p>
</div>
<div id="content_2" class="box">
<h1>Second Box</h1>
<p>Content goes here...</p>
</div>
.....
<!-- links for boxes // -->
Show First Box
Show Second Box
<!-- css // -->
<style>
.box {
display: none;
}
</style>
<!-- javascript // -->
<script type="text/javascript">
$(document).ready( function() {
$('.link').click( function() {
// process modal
});
});
</script>
So when User click on First/Second Box link, the jQuery modal popup with content. My Purpose is not to hide the text. I heard and read in some blogs, Google will take action with hidden text. Is my way illegal/bad for SEO? OR are there better way to do this without display:none?
You will find Google themselves actually use display:none; on their homepage - and considering the popularity of jQuery and other JavaScript libraries using these kinds of effects, I can't see how it will negatively impact your SEO if you use it in necessary circumstances.
I use following snippet to hide sub-menus on css3 navigation menus with some cool ease-in, ease-in-out transitions . And afaik this is valid css to hide elements when it comes to SEO.
opacity: 0;
visibility: hidden;
Already discussed at
Is there an alternative to conditional display:none
Instead of using display:none; you can use left: -9999px;position:absolute; it will still display the content for the search engine but it will be displayed somewhere not for the users.
http://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/
Related
everyone !
So what I have in mind is to have a div class= container with 2 rows of 3 cards within it .
I am using bootstrap 4 as my grid and layout.
Card examples: https://getbootstrap.com/docs/4.0/components/card/
<div class="container>
<div class="row>
<card-element />
<card-element />
<card-element />
<card-element />
</div>
</div>
Basically these 4 elements again are divs with other divs in them to distribute the content f.x at the top with a and for description.
The functionality I'm trying to achieve is that when I click on any of these s the one that I have clicked should go ahead and expand in the middle when the others are done moving to either the left or right side of the container element and resizing to a smaller size (like a thumbnail but very small).
So far I've tried using transform and translate for expansion, however I cannot figure out how to mix and match the two of the functionalities.
I have thought of having a couple of JQuery functions within these steps :
1.Onclick- The selected element expands while all other elements are .remove() by JQuery.
2.Once it expands the other elements get appended to 2 sides - let's say 2 divs within the container positioned to be on the left and right end of it. Of course the appending is done exact to either side div.
3. The transition that supposedly happens is the other card-element thumbnails dissapear eased-in/out and appear once the .append function is done.
Any ideas would help or any reference to a similair problem/task would be of great help.
You can use Jquery-UI, there are a component called accordion, it works like:
$(function () {
$("#accordion").accordion();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="accordion">
<h3>Card 1</h3>
<div>
<p>
Text of card 1...
</p>
</div>
<h3>Card 2</h3>
<div>
<p>
Text of card 2...
</p>
</div>
</div>
You can use the Bootstrap Collapse component and jQuery to toggle the CSS classes. For example...
$('.collapse').on('show.bs.collapse', function () {
$('.collapse.show').not(this).collapse("hide");
$(this).parents('.col-sm').toggleClass("col-sm-6 col-sm");
$(this).parents('.card-body').find('.col-12').toggleClass("col col-12");
});
$('.collapse').on('hide.bs.collapse', function () {
$(this).parents('.col-sm-6').toggleClass("col-sm col-sm-6");
$(this).parents('.card-body').find('.col').toggleClass("col-12 col");
});
And then add some CSS transformations as the classes change...
.row > [class*="col"], img{
transition: all .3s ease;
}
Demo: https://www.codeply.com/go/emFWdeJQgS
Of course you'll have to make some mods to get it exactly as desired.
thank you for taking the time to review my question! :-) I am attempting to write better, cleaner, more maintainable HTML using custom HTML elements as opposed to the traditional 'div' methods. I have a very simple example that works using a div and a class on it to map my link to the div that I want to show/hide and this does work. I include this as a working example of the kind of functionality I am trying to produce:
<html>
<head>
<style>
<!-- Not sure if display or visibility is the way to go so will look -->
<!-- that later, for now just setting both as that works -->
<!-- For some reason doing this does not seem to work -->
.hidden {
display: none;
visibility: hidden;
}
.unhidden {
display: block;
visibility: visible;
}
<!-- but, doing this does, anyone any idea why? -->
.hidden { display: none; }
.hidden { visibility: hidden; }
.unhidden { display: block; }
.unhidden { visibility: visible; }
</style>
<script type="text/javascript">
function toggle_view_div(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
</head>
<body>
<p>
This test shows or hides a div referenced by its class
</p>
Do the test
<div id="testToggleDivID" class="hidden">
<h3>Testing Toggling HTML</h3>
</div>
</body>
</html>
However, I am trying to provide this kind of functionality with multiple links to multiple sets/subsets of text, I have tried the following but am obviously doing something silly as I can't get it to work:
<html>
<head>
<script type="text/javascript">
function toggle_view_node(nodeID) {
nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
}
</script>
</head>
<body>
<p>
This test shows or hides Topic 1 custom element, (or at least attempts to
</p>
Topic 1
<p>
This test shows or hides Topic 2 custom element, (or at least attempts to
</p>
Topic 2
<p>
<p>
This test shows or hides the Intro custom element, (or at least attempts to
</p>
Introduction
<p>
This test shows or hides the Detail custom element, (or at least attempts to
</p>
Detail
<p>
<Intro>Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page</Intro>
<Detail>I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below</Detail>
</p>
<Topic1>
<h1>Topic 1</h1>
<p>
Some topics to be just simple nodes of text.
</p>
</Topic1>
<Topic2>
<h1>Topic 2</h1>
<p>
Other topics to be more detailed topics, <Topic1>potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes</Topic1> though generally referencing only topic 2 content. <Detail>However it would be nice to be able to toggle not directly relevant, but nice to have detail as well</Detail>
</p>
</Topic2>
<Topic3>
<h1>Topic 3</h1>
<p>
<Intro>Some topics might want an intro<Detail>, that may want further detail contained in them</Detail> that would also provide sufficient intro in itself.</Intro>
So, is this possible? I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?</p>
</Topic3>
</body>
</html>
Please, can someone help me figure out what I am doing wrong. I really want to produce the aforementioned functionality with a simple bit of CSS or JS that is as dynamic as possible. Ideally I wont need to specify specific (especially repeated code for each topic or HTML tag that I want the ability to show/hide via a button/link. Obviously, I will probably have to set a few default assignments, maybe turning detail off by default, but if I can avoid required extra repetitive code for each "context" I wish to flip that would be amazing!!!
Any pointers in any direction that can help me achieve what I am attempting without having to use jQuery or a verbose library over and above JS and CSS would really make my day!
Many thanks in advance and apologies if I am doing something really stupid, I haven't done that much work with custom elements and so probably am.
Kind regards,
James
** Latest Attempt **
<html>
<head>
<style>
<!-- Not sure if display or visibility is the way to go so will look -->
<!-- that later, for now just setting both as that works -->
<!-- For some reason doing this does not seem to work -->
.hidden {
display: none;
visibility: hidden;
}
.unhidden {
display: block;
visibility: visible;
}
<!-- but, doing this does, anyone any idea why? -->
.hidden { display: none; }
.hidden { visibility: hidden; }
.unhidden { display: inline; }
.unhidden { visibility: visible; }
<!-- Playing with something like this, ideally I would -->
<!-- configure the show/hide state of my custom HTML tags -->
<!-- universally in a similar way? -->
Topic1.hide { display: none; }
Topic2.hide { display: none; }
Topic3.hide { display: none; }
Intro.hide { display: none; }
Detail.hide { display: none; }
<!-- Another attempt to configure switch state but does not work either -->
Topic1 { className: unhidden; }
Topic2 { className: unhidden; }
Topic3 { className: unhidden; }
Intro { className: unhidden; }
Detail { className: unhidden; }
</style>
<script type="text/javascript">
// This works, but is not clean
function toggle_view_div(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
// I am now attempting to use this on 'Topic1' as per the suggestion
// in the comments of this post, for some reason it does not work, wondering if
// I need to do a .forEach to parse the set of nodeID's of the 'Topic1' in this
// example, but if working whatever HTML tag name that I want to toggle in or
// out of view
function toggle_view_node_id(nodeID) {
var item = document.getElementById(nodeID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
// This does not work but I have left to show what I tried that did not work
function toggle_view_node(nodeID) {
if (nodeID) {
nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
}
}
</script>
</head>
<body>
<p>
This test shows or hides a div referenced by its class
</p>
Do the test that works using extra layer of div with mapped class
<p>
This test shows or hides Topic 1 custom element,
(or at least attempts using the suggestion in this post
comments to try to make work without inline JS and call a
function to do it as with my working example, unfortunatly
however, this still does not seem to work :(
</p>
Topic 1
<p>
This test shows or hides Topic 2 custom element,
(or at least attempts to using existing method that doesn't work
</p>
Topic 2
<p>When I have it working I hope to be able to have: </p>Topic 3
<p>And... </p>Intro
<p>And this... </p>Detail
<div id="testToggleDivID" class="hidden">
<h3>Testing Toggling HTML into view using a div and associated class of hidden, can I not do this on a custom element?</h3>
</div>
<p>
<Intro>Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page</Intro>
<Detail>I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below</Detail>
</p>
<Topic1>
<h1>Topic 1</h1>
<p>
Some topics to be just simple nodes of text.
</p>
</Topic1>
<Topic2>
<h1>Topic 2</h1>
<p>
Other topics to be more detailed topics, <Topic1>potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes</Topic1> generally referencing only topic 2 content. <Detail>However it would be nice to be able to toggle not directly relevant, but nice to have detail as well</Detail>
</p>
</Topic2>
<Topic3>
<h1>Topic 3</h1>
<p>
<Intro>Some topics might want an intro<Detail>, that may want further detail contained in them</Detail> that would also provide sufficient intro without.</Intro>
So, is this possible? I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?</p>
</Topic3>
</body>
</html>
you don't need a .unhidden class, only a .hidden class. It looks like:
.hidden{
display:none;
}
simply use classList like classList.toggle("hidden") or .add or .remove.
I am using Django CMS 3.0.3. I've written a cms plugin with 2 CMSPluginBase derived classes, one adds a slider to a placeholder and another one is for adding slides as children to the slider.
In live mode everything works fine, but when I am editing content, I can't use the slider. The reason is that django-cms is decorating the html code with additional elements like this:
<div class="slider">
<div class="cms_plugin cms_plugin-2" style="width: 0px; overflow: hidden; position: absolute; left: 0px; display: block;">
<!-- Slider Item -->
<div class="slider-item"> [MY SLIDER CONTENT] </div>
<!-- /Slider Item -->
</div>
</div>
I got the HTML/CSS/JS from somebody else and I would preferable not use another slider. What options do I have to work around this problem?
Is there a way in django-cms to switch off the wrapping of plugins in "content mode" only, but to have the placeholder <div> included in "structure mode"? That would not be super convenient, but a workaround that I can live with.
Is there something else, I could do? I don't want to touch the slider itself. It might get an update and then I'd have to adjust it to adjust the slider to my needs again.
django-cms is need to wrap your plugin with <div class="cms_plugin cms_plugin-2"> for relation with "structure mode". There are no other variants.
I have made a drop down menu with CSS using the #nav:hover selector to activate the property and value transition:height
http://jsfiddle.net/bryank/WXAcm/
What I really want to happen:
when user clicks(as opposed to hover) the area activated by #nav:hover once the menu drops and stays dropped. Then if the same #nav:hover area is clicked again the menu contracts.
After some research, what I understand so far, I believe I need to use javascript. I know very little javascript beyond the most basic of basic fundamentals. Im am currently digging through all the relevant javascript I can find, and I think I have bits and pieces to the puzzle... but nothing functioning yet... anyone know a clear and concise way of making this happen ?
Here's a CSS only solution:
DEMO: http://jsfiddle.net/k7HqE/
HTML
<!-- This is what is clicked, you can rework it to wrap the #nav if want -->
<label for="toggler">CLICK ME</label>
<!-- Hidden checkbox that gets toggled when the `label` is clicked -->
<input id="toggler" type="checkbox">
<!-- Your unmodified nav -->
<div id="nav">
<!--logo_image--> <a class="bg" href="#"><img src="b&w_logo.jpeg" height="56" width="110" /></a>
<!---->
<div style="height:1em;"></div>
<div style="font-size:1.1em;"><b>Artists</b>
</div>
<div style="height:1em;"></div>
<!---- AND SO ON ---->
</div>
CSS
/* hide the input */
#toggler { display: none; }
/* transition based on input checked state */
input:checked + #nav {
height:39em;
}
I think I have something :
Javascript :
document.querySelector("#nav").onclick = function(evt){
var arClass = this.className.split(" ");
if(arClass.indexOf("active")>=0){
this.className = "";
} else {
this.className = "active";
}
};
NOTES
indexOf may not work in every browser (IE7 & IE8).
This function will replace all your classes on #nav.
CSS :
#nav:hover,#nav.active{
height:39em;
}
http://jsfiddle.net/JFjwJ/
I am new to CSS and Javascript. I want to create a specific area (I use the div tag) in the page where once a link is clicked within, the area will expand and an additional content would be displayed. I managed to create a code which does the job only partially: the new content is displayed after the click but this content is not displayed within the area border. In few words the area is not expanded, only a new content is displayed...any suggestion?
I really like this jQuery accordion method:
Live Demo: http://jsfiddle.net/kbZDv/1/
It's easy to use, style and looks good.
All you need to do is include the latest version of jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
Here is the HTML markup:
<p class="trigger">Click here to expand and reveal more information</p>
<div class="toggle_container">
<div class="block">
<p>Content goes here.</p>
</div>
</div>
The basic (yet to be styled) CSS:
p.trigger{
margin-bottom:7px;
margin-top:-5px;
}
.toggle_container{
margin-bottom:10px;
}
.toggle_container p{
margin:0px;
}
.toggle_container{
background:#f0f0f0;
clear: both;
font-size:100%;
}
And the all important jQuery to make it work:
$(".toggle_container").hide();
$("p.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
});
You could use a jquery plugin like div expand?
http://plugins.jquery.com/plugin-tags/div-expand
or perhaps a jquery exander plugin
http://plugins.learningjquery.com/expander/demo/index.html