Switch navigation - always display the menu on the existing page

I have a toggle menu implemented. Please check out the code and functionality on JsFiddle

When clicking on a h3 tag like Category 1 (which is an a tag), the menu opens and remains open on the current page.

However, if you click on the h3 tag (Category1) again or any submenu for Category 1 such as Option 1, the menu collapses and then reopens on the current page.

Is there a way to prevent the collapse and reopen function when clicking on any links within the current page?

Any help with code snippets or examples would be greatly appreciated.

Thank you in advance.

javascriptjqueryhtmlcss

Answer №1

http://jsfiddle.net/LcsLr/33/

HTML

   <html>
    <head>
    <title>Test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>

<body>

  <div id="productmenu">
    <div class="submenublock" id="submenu1">

        <h3>
            <a href="#" class="link" >Category 1</a>
            <a href='#' class="arrow" ></a>             
        </h3>
        <ul class="second_level">
           <li><a href="#" class="linkx">Option 1</a></li>
           <li><a href="#" class="linkx">Option 2</a></li>
        </ul>
      </div>

      <div class="submenublock" id="submenu2">

      <h3><a href="#" class="link">Category 2</a></h3>

      </div>

      <div class="submenublock" id="submenu3">
          <h3>
              <a href="#" class="link">Category 3</a>
              <a href='#' class="arrow" ></a>
          </h3>
           <ul class="second_level">
               <li><a href="#" class="linkx">Option 1
                   </a></li>
               <li><a href="#" class="linkx">Option 2
                   </a></li>
               <li><a href="#" class="linkx">Option 3
                   </a></li>
           </ul>
      </div>


   </div>

</body>​

JS

   $(document).ready(function() {

    $('h3,.second_level li').each(function(){
        var anchor = $(this).children('a').attr('href');

        if(window.location.pathname.search(anchor) != -1) {
          $(this).children('a').addClass('currentPage')
        }
    });

    $('.currentPage').each(function(){

        var section;

        if($(this).parent('h3').length > 0){
            section = $(this).parent('h3');
        }
        else{
            section = $(this).parents('ul').siblings('h3');
        }

        $(section).children('.arrow').addClass('open');
        $(section).siblings('ul').show();

    });

    $('.link').click(function() {

        OpenParent($(this).parent('h3'));

        window.location = $(this).attr('href');

    });

    $('.arrow').click(function(e){
        e.preventDefault();
        OpenParent($(this).parent('h3'));

    });        
});

function OpenParent(CurrentParent){
   var currentArrow = $(CurrentParent).children('.arrow');

   $('.open').not(currentArrow ).removeClass('open').parent().siblings('ul').slideUp('fast');

   currentArrow.toggleClass('open');

   $(CurrentParent).next().slideToggle('fast');

}​

CSS

   #sidebar {
   float:left;
   width:220px;
}


#productmenu { width:220px; margin-left: 0px;}

.submenublock{

    margin: 0px;
    padding: 0px;

}

.submenublock h3{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    margin: 0px; 
    border-bottom:#CCC 1px solid;
}

.submenublock h3 a{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    text-decoration:none;
    color: #000000;

}

.submenublock h3 a:hover, .submenublock h3 a:active, .submenublock h3 a:focus
{
color: #00aeef;
}

.second_level{
    list-style-type:none;
    list-style:none;
    margin:0px;
    padding:0px;

}

.second_level li{
    list-style-type:none;
    list-style:none;
    display: block;
    border-bottom:#CCC 1px dashed;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    /* background:url(images/menuarrowright.gif) no-repeat right;*/
}

.second_level li a{
    display: block;
     margin-left:15px;
     text-decoration:none;
     color:#000000;


}

#productmenu ul li a:hover, #productmenu ul li a:active, #productmenu ul li a:focus
{
color: #00aeef;
}


.second_level{
  display:none;
}

a.currentPage{
  color:blue !important;
}

.link{
    padding:10px;15px;
    display:block;
}

.linkx{
    padding:10px;15px;
    display:block;
}

.arrow{
   background:url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png) no-repeat right 2px;

    float:right;
    height:17px;
    width:13px;
    margin-top:-27px;
}

.open{
   background:url(http://www.logan.ws/images/small_up_arrow_icon.gif) no-repeat right 2px;
}


</style>​

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why aren't CSS variables "calculating" the color?

Can anyone help me understand why I am having trouble assigning block-level CSS variables using values from SASS? Specifically, the line color: hsl(3, 75%, var(--main-color-l)); is not producing any output. My setup involves a static site generator with ...

csssass

Is there a way to see the default reactions in a browser when keyboard events such as 'tab' keydown occur?

Whenever I press the 'tab' key, the browser switches focus to a different element. I would like to be able to customize the order of focused elements or skip over certain elements when tabbing through a page. While I am aware that I can use preve ...

javascripthtmlbrowserevent-handlingkeyboard-events

Error in Javascript programming | tracking progress bar

After stumbling upon this code snippet at this link, I was eager to delve deeper into the world of JavaScript and jQuery. However, upon implementing these codes, I encountered a perplexing issue. The progress bar and continue buttons seem to be non-funct ...

javascriptjqueryhtmltwitter-bootstrap

Controlling the activation of a button on a parent modal popup from a child within an IFrame using javascript

I am struggling to toggle the button on the main window from the child window. Here is a snippet from the main page: <ajaxToolkit:ModalPopupExtender ID="mpeTest" runat="server" CancelControlID="btnClose" PopupControlID="pnl1" TargetControlID="showMp ...

javascriptjqueryasp.net

Creating a dynamic side navigation menu that adjusts to different screen sizes

I have been working on a project's webpage that was initially created by another Software Engineer. After he left, I continued to work on the webpage. The issue I encountered is that he preferred a side menu over a navbar using the left-panel and righ ...

javascriptjqueryhtmlcss

What are some effective methods for maintaining the integrity of HTML content?

Attempting to safeguard HTML content generated in a specific location by powerMTA. Here is the code snippet of the HTML content. Content-1. <html>=0A<body>=0A<table style=3D"max-width:576px;font-family:Arial, Helvet= ica, sans-serif;&q ...

phphtmlxml-parsinghtml-parsing

Namespace remains ambiguous following compilation

I'm currently developing a game engine in TypeScript, but I encountered an issue when compiling it to JavaScript. Surprisingly, the compilation process itself did not throw any errors. The problem arises in my main entry file (main.ts) with these ini ...

javascripttypescriptbrowserifytsify

Is the background image viewport centered?

I am embarking on a new venture with a website design that is unfamiliar to me, but I have a clear goal in mind... My design concept involves a single large image measuring 1000px x 1000px as the background, while the actual content fills up only 500px x ...

htmlcss

Change the attribute to read-only upon modification of the dropdown value

I have a dropdown menu with four options. My goal is to make the "number" input field readonly if the user selects either "option3" or "option4" from the dropdown. <select id="dropdown"> <option value="option1">option1</option> ...

javascriptjqueryhtml

React and Express failing to display content

After relocating my React frontend folder to my collaborator's Express backend folder, here is our updated file structure. https://i.stack.imgur.com/i77XJ.png This code snippet represents app.js which is responsible for rendering the website. const ...

javascriptreactjsexpressfrontendbackend

AngularJS: Sending form data to an external server results in an error due to restricted URI access

I am currently diving into the world of AngularJs and putting effort into mastering it. In this process, I've created a demo application that attempts to send form data to a localhost site. The code for this endeavor is provided below. index.html &l ...

javascriptphpangularjs

What is the best way to retrieve a document element in React when utilizing an external script?

In my React project, I have successfully implemented a chat button using an external script. However, I encountered an issue where I needed to hide the chat button on specific pages. Since I couldn't access the button's element using a ref, I res ...

javascriptreactjs

Exploring the power of TypeScript within the useContext hook

I recently started following a React tutorial on YouTube and decided to convert the project from JavaScript to TypeScript. However, I am facing difficulties with implementing useContext in my code. Any help or guidance would be greatly appreciated. If yo ...

javascripttypescriptreact-contextcreatecontext

Creating if-else conditions in React can be achieved by utilizing the ternary

How can I make an if-else condition dynamic based on a button click? I have tried implementing it but it doesn't seem to work. I attempted to create conditions for different languages. For example, clicking the button labeled "Español" should print ...

htmlreactjs

Maximizing the potential of a single .js file for multiple .html pages with AngularJS

I have a JavaScript file containing a function that I want to be accessible by multiple HTML pages without duplicating it in another file. Currently, the JS file starts with the following code snippet: (function(){ var app = angular.module('Proj ...

javascripthtmlangularjs

To calculate the sum of input field rows that are filled in upon button click using predetermined values (HTML, CSS, JavaScript)

Greetings for exploring this content. I have been creating a survey that involves rows of buttons which, when clicked, populate input fields with ratings ranging from 5 to -5. The current code fills in one of two input fields located on opposite sides of ...

javascripthtmlcssvariablesinput

import jQuery into a JavaScript file

I'm currently working on a Chrome extension that relies on background.js to perform basic tasks. I need to include jquery.js in my background.js file so that I can utilize its ajax function, but I'm unsure of how to achieve this. Is it even possi ...

javascriptjqueryajaxgoogle-chromeinclude

Having difficulty transmitting extensive data in a Jquery ajax request

Hello, I'm currently working on a MVC4 application where I am saving values to a Database. However, I encountered an error stating: "The request filtering module is configured to deny a request where the query string is too long." I am using an Ajax ...

c#jqueryjsonasp.net-mvc-4iis

Develop an interactive AngularJS application with a dynamic Bootstrap table feature

I'm in the process of transitioning my existing jQuery code to AngularJS. One part of the code involves creating a dynamic Bootstrap table based on JSON data retrieved from a Spring REST service. The snippet below shows the jQuery code used to create ...

javascriptjqueryangularjstwitter-bootstrapbootstrap-table

Best practices for efficiently updating state in React components

Currently, I am in the process of learning React and trying to grasp its concepts by practicing. One exercise I decided to tackle involves deleting an element from an array when a user clicks on it in the UI. Below is the code snippet that I have been work ...

javascriptreactjs