Hide the first child element

Question

Hide the first child element

JavaScript

$('dl #last div #product-tabs-content').not(":first-child").hide();

This testing code works perfectly, however...

 <dl class="last"><div class="product-collateral row-fluid">
   <constructob>
     <ul class="product-tabs">
       <li id="product_tabs_1" class="first active">
         <a href="javascript:void(0)" style="text-decoration: underline;">111</a>
       </li>
       <li id="product_tabs_product_3я" class="">
         <a href="javascript:void(0)">222</a>
       </li>
       <li id="product_tabs_2" class="last">
         <a href="javascript:void(0)">333</a>
       </li>
       <li id="product_tabs_капут" class="last">
         <a href="javascript:void(0)" style="text-indent: initial;">444</a>
       </li>
     </ul>
   </constructob>

   <div class="product-tabs-content5" id="product_tabs_маря_contents">555</div>
   <div class="product-tabs-content" id="product_tabs_маря_contents">1</div>
   <div class="product-tabs-content" id="product_tabs_product_неля_contents" style="display: none;">2</div>
   <div class="product-tabs-content" id="product_tabs_ганя_contents" style="display: none;">3</div>
   <div class="product-tabs-content" id="product_tabs_капут_contents" style="display: none;">4</div>

  </div>
<dl>

Unfortunately, this script does not work on my live website.

Check out the page with the issue here

I initially thought it was a nococflict.js problem, but even setting $jq in functions did not solve anything.

It could be an issue with the class/IDs structure, but my Java knowledge is quite limited to troubleshoot this problem.

javascript css css-selectors

Answer 1

Answer №1

The parameters you are selecting appear to be classes in the HTML code provided, not IDs. Are you intending to use this instead?

$('dl .last div .product-tabs-content').not(":first-child").hide();

Answer 2

The parameters you are selecting appear to be classes in the HTML code provided, not IDs. Are you intending to use this instead?

$('dl .last div .product-tabs-content').not(":first-child").hide();

Answer 3

Answer №2

I noticed that this code is present on your website:

<script type="text/javascript">
//<![CDATA[м
setTimeout(display, 100);
function display() {
    $jq('dl #last div #product-tabs-content').not(":first-child").hide();

    Varien.Tabs = Class.create();
    Varien.Tabs.prototype = {
      initialize: function(selector) {
        var self=this;
        $$(selector+' a').each(this.initTab.bind(this));
      },

      initTab: function(el) {
          el.href = 'javascript:void(0)';
          if ($(el.parentNode).hasClassName('active')) {
            this.showContent(el);
          }
          el.observe('click', this.showContent.bind(this, el));
      },

      showContent: function(a) {
        var li = $(a.parentNode), ul = $(li.parentNode);
        ul.select('li').each(function(el){
          var contents = $(el.id+'_contents');
          if (el==li) {
            el.addClassName('active');
            contents.show();
          } else {
            el.removeClassName('active');
            contents.hide();
          }
        });
      }
    }
    new Varien.Tabs('.product-tabs');
    //]]>
}
</script>

Firstly, it would be better to rearrange the code slightly. The closing "//]]>" should come before closing the bracket like this:

    ....
    }
    new Varien.Tabs('.product-tabs');
}
//]]>
</script>

Additionally, using setTimeout with a very short delay does not ensure that the entire page is loaded. Try changing the delay from "100" to "2000" to see if it works better. It might be more reliable to wait for the document ready event rather than using setTimeout because page load times can vary.

<script type="text/javascript">
//<![CDATA[м
$jq(document).ready(function () {
    $jq('dl #last div #product-tabs-content').not(":first-child").hide();

    Varien.Tabs = Class.create();
    Varien.Tabs.prototype = {
      initialize: function(selector) {
        var self=this;
        $$(selector+' a').each(this.initTab.bind(this));
      },

      initTab: function(el) {
          el.href = 'javascript:void(0)';
          if ($(el.parentNode).hasClassName('active')) {
            this.showContent(el);
          }
          el.observe('click', this.showContent.bind(this, el));
      },

      showContent: function(a) {
        var li = $(a.parentNode), ul = $(li.parentNode);
        ul.select('li').each(function(el){
          var contents = $(el.id+'_contents');
          if (el==li) {
            el.addClassName('active');
            contents.show();
          } else {
            el.removeClassName('active');
            contents.hide();
          }
        });
      }
    }
    new Varien.Tabs('.product-tabs'); 
});
//]]>
</script>

Answer 4

I noticed that this code is present on your website:

<script type="text/javascript">
//<![CDATA[м
setTimeout(display, 100);
function display() {
    $jq('dl #last div #product-tabs-content').not(":first-child").hide();

    Varien.Tabs = Class.create();
    Varien.Tabs.prototype = {
      initialize: function(selector) {
        var self=this;
        $$(selector+' a').each(this.initTab.bind(this));
      },

      initTab: function(el) {
          el.href = 'javascript:void(0)';
          if ($(el.parentNode).hasClassName('active')) {
            this.showContent(el);
          }
          el.observe('click', this.showContent.bind(this, el));
      },

      showContent: function(a) {
        var li = $(a.parentNode), ul = $(li.parentNode);
        ul.select('li').each(function(el){
          var contents = $(el.id+'_contents');
          if (el==li) {
            el.addClassName('active');
            contents.show();
          } else {
            el.removeClassName('active');
            contents.hide();
          }
        });
      }
    }
    new Varien.Tabs('.product-tabs');
    //]]>
}
</script>

Firstly, it would be better to rearrange the code slightly. The closing "//]]>" should come before closing the bracket like this:

    ....
    }
    new Varien.Tabs('.product-tabs');
}
//]]>
</script>

Additionally, using setTimeout with a very short delay does not ensure that the entire page is loaded. Try changing the delay from "100" to "2000" to see if it works better. It might be more reliable to wait for the document ready event rather than using setTimeout because page load times can vary.

<script type="text/javascript">
//<![CDATA[м
$jq(document).ready(function () {
    $jq('dl #last div #product-tabs-content').not(":first-child").hide();

    Varien.Tabs = Class.create();
    Varien.Tabs.prototype = {
      initialize: function(selector) {
        var self=this;
        $$(selector+' a').each(this.initTab.bind(this));
      },

      initTab: function(el) {
          el.href = 'javascript:void(0)';
          if ($(el.parentNode).hasClassName('active')) {
            this.showContent(el);
          }
          el.observe('click', this.showContent.bind(this, el));
      },

      showContent: function(a) {
        var li = $(a.parentNode), ul = $(li.parentNode);
        ul.select('li').each(function(el){
          var contents = $(el.id+'_contents');
          if (el==li) {
            el.addClassName('active');
            contents.show();
          } else {
            el.removeClassName('active');
            contents.hide();
          }
        });
      }
    }
    new Varien.Tabs('.product-tabs'); 
});
//]]>
</script>

Answer 5

Answer №3

Just wanted to express my gratitude to everyone here. I was able to resolve my issue following this solution.

<script type='text/javascript'>//<![CDATA[ 
$jq(document).ready(function () {
$jq('.last .product-tabs-content').not("div:eq(0)").hide();
});//]]>  
</script>

Answer 6

Just wanted to express my gratitude to everyone here. I was able to resolve my issue following this solution.

<script type='text/javascript'>//<![CDATA[ 
$jq(document).ready(function () {
$jq('.last .product-tabs-content').not("div:eq(0)").hide();
});//]]>  
</script>

Hide the first child element

Answer №1

Answer №2

Answer №3

Similar questions

Attach a Material-UI Popper component to a customized edge label in a React Flow

Using Angular 2 HTTP to retrieve a list of file names from a Node backend directory

Utilizing JSON data to generate an HTML webpage showcasing a collection of community districts through the power of JavaScript

How can ListSubheader in Material-UI be customized to match the style of iOS UITableView?

What is the best method for obtaining a spring controller's object using AJAX?

The jQuery UI dialog stubbornly refuses to close when tapped, yet opens without hesitation

A guide to incorporating external CSS files in Angular 5 components using styleUrls

Using AJAX and jQuery for database connectivity allows for seamless data retrieval and manipulation

Is it possible to save the location of a draggable box using CSS3?

Controller receiving empty object array from FormData

working with html data in a bootstrap modal using javascript

Meteor twilio SMS feature not functioning properly

Expand the width of the image gradually until it reaches its initial size within a flexible DIV container

Bar chart with overlays in Chart.js

Anticipate that the typescript tsc will generate an error, yet no error was encountered

Retrieve the outer-HTML of an element when it is clicked

Converting XML to JSON in a Node.js application

Guide to adding a Scrollable Navbar

The Access-Control-Allow-Headers request header field is not permitted as per the Access-Control-Allow-Headers directive

Having difficulty positioning the Divider correctly among Grid items